Основы использования метода componentDidMount в React

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

Пример использования метода componentDidMount

class ExampleComponent extends React.Component {
  componentDidMount() {
    console.log("Component mounted");
  }

  render() {
    return <h1>Hello, world!</h1>;
  }
}

В данном примере, сразу после того как компонент ExampleComponent будет отрендерен и добавлен в DOM, в консоль будет выведено сообщение "Component mounted".

Важность использования componentDidMount

Если вам необходимо выполнять запросы на получение данных с сервера в React компоненте, то самое подходящее место для этих запросов - это метод componentDidMount. Благодаря асинхронной природе JavaScript, операция запроса данных не будет блокировать рендеринг вашего компонента, что обеспечивает лучшую производительность и улучшает общее впечатление от использования вашего приложения.

class DataFetcher extends React.Component {
  state = {
    loading: true,
    data: null,
  };
  
  componentDidMount() {
    fetch('/api/data') // предполагаемый запрос к API
      .then(response => response.json())
      .then(data => this.setState({data, loading: false}));
  }

  render() {
    if (this.state.loading) {
      return <p>Loading...</p>;
    }

    return <p>{this.state.data}</p>;
  }
}

В этом примере компонент сначала рендерит сообщение "Loading...", затем выполняет запрос к API при монтировании. Когда данные от API возвращаются, компонент перерендеривается, и мы видим полученные данные.

Заключение

Метод componentDidMount является ключевой частью жизненного цикла компонента в React и обычно используется для выполнения действий, которые требуют наличия DOM, таких как получение данных с сервера. Вызов этого метода происходит только один раз - сразу после первого рендеринга компонента.