ReactJS componentDidMount () Метод

Опубликовано: 23 Декабря, 2021

Метод componentDidMount () позволяет нам выполнять код React, когда компонент уже размещен в DOM (объектной модели документа). Этот метод вызывается на этапе монтирования жизненного цикла React, то есть после рендеринга компонента.

Все запросы AJAX и DOM или обновление состояния должны быть закодированы в блоке метода componentDidMount (). Мы также можем настроить все основные подписки здесь, но, чтобы избежать проблем с производительностью, всегда не забывайте отписываться от них в методе componentWillUnmount ().

Синтаксис:

 componentDidMount ()

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

npx create-react-app functiondemo

Шаг 2: После создания папки проекта, т.е. functiondemo , перейдите к ней с помощью следующей команды:

 cd functiondemo

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

Пример: В этом примере мы собираемся создать приложение цвета имени, которое изменяет цвет текста, когда компонент отображается в дереве DOM.

App.js: теперь запишите следующий код в файл App.js. Здесь App - это наш компонент по умолчанию, в котором мы написали наш код.

Javascript

 import React from 'react' ;
 class App extends React.Component {
  constructor(props) {
    super (props);
 
    // Initializing the state
    this .state = { color: 'lightgreen' };
  }
  componentDidMount() {
 
    // Changing the state after 2 sec
    // from the time when the component
    // is rendered
    setTimeout(() => {
      this .setState({ color: 'wheat' });
    }, 2000);
  }
  render() {
    return (
      <div>
        <p
          style={{
            color: this .state.color,
            backgroundColor: 'rgba(0,0,0,0.88)' ,
            textAlign: 'center' ,
            paddingTop: 20,
            width: 400,
            height: 80,
            margin: 'auto'
          }}
        >
          GeeksForGeeks
        </p>
 
      </div>
    );
  }
 }
 export App; default 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Выход:

React-js

ReactJS componentDidMount () Метод

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ