Хук componentDidMount() в React JS

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

Как и все методы жизненного цикла, componentDidMount вызывается автоматически React-ом, поэтому не требует явного вызова.

Давайте рассмотрим пример использования метода componentDidMount. Предположим, у нас есть компонент, который отображает список задач. Мы хотим получить данные о задачах с сервера и отобразить их на странице при первой загрузке страницы.

import React, { Component } from 'react';
import axios from 'axios';

class TaskList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: []
    };
  }

  componentDidMount() {
    axios.get('/api/tasks')
      .then(response => {
        this.setState({ tasks: response.data });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <ul>
        {this.state.tasks.map(task => <li key={task.id}>{task.title}</li>)}
      </ul>
    );
  }
}

export default TaskList;

В этом примере мы создали компонент TaskList, который отображает список задач. В конструкторе мы инициализировали состояние tasks пустым массивом. В методе componentDidMount мы выполняем GET-запрос к API сервера, чтобы получить список задач. Когда ответ от сервера будет получен, мы обновляем состояние компонента, используя метод setState. Метод render использует массив задач из состояния компонента для создания списка задач.

Давайте рассмотрим, что происходит в компоненте, когда он монтируется на странице.

1. React создает экземпляр компонента и вызывает конструктор, который инициализирует состояние компонента.
2. React вызывает метод componentDidMount.
3. В методе componentDidMount мы отправляем GET-запрос к серверу для получения списка задач.
4. Когда ответ от сервера будет получен, мы вызываем метод setState, чтобы обновить состояние компонента.
5. React вызывает метод render, который отображает список задач.

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

Важно помнить, что метод componentDidMount вызывается только один раз при монтировании компонента на странице.

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

Для того, чтобы понимать, как использовать метод componentDidMount(), давайте рассмотрим пример использования этого метода вместе с fetch() запросом.

Мы будем использовать React для создания компонента User, который будет выводить информацию о пользователе, полученную с помощью запроса fetch().

import React, { Component } from 'react';

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(data => {
        this.setState({
          name: data.name,
          email: data.email,
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <p>{this.state.email}</p>
      </div>
    );
  }
}

export default User;

В этом примере мы создали компонент User, который имеет два состояния: name и email. В методе componentDidMount() мы делаем fetch() запрос к API, который возвращает информацию о пользователе. Когда мы получаем ответ, мы обновляем состояние компонента с помощью setState(). Кстати, метод setState() — это метод, который используется для обновления состояния компонента и вызова перерисовки компонента. Он определен в базовом классе React.Component и доступен для использования в классовых компонентах.

Когда компонент рендерится в браузере, метод componentDidMount() вызывается автоматически. Затем мы делаем запрос и обновляем состояние компонента, что приводит к обновлению отображения пользовательских данных на странице.

В функциональном стиле компонент будет выглядеть так:

import React, { useState, useEffect } from 'react';

function User() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(data => {
        setName(data.name);
        setEmail(data.email);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h1>{name}</h1>
      <p>{email}</p>
    </div>
  );
}

export default User;

Заключение

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

Надеюсь, этот обзор помог вам понять, как использовать метод componentDidMount() в React. Помните, что этот метод не должен использоваться для изменения состояния компонента, поскольку это может привести к бесконечному циклу перерисовки. Вместо этого используйте метод componentDidUpdate(), если вам нужно изменить состояние компонента после его обновления.