Как использовать хуки жизненного цикла в React.js?

@autumn_parker 

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

1. Хуки монтирования: Хуки монтирования вызываются при создании компонента React и добавлении его в DOM.

• constructor() - вызывается при создании компонента и позволяет инициализировать состояние и привязывать методы к экземпляру компонента.
• componentDidMount() - вызывается сразу после добавления компонента в DOM и позволяет выполнять действия, которые требуют наличия элемента в DOM, например, запросы к серверу или установка слушателей событий.

1. Хуки обновления: Хуки обновления вызываются при обновлении состояния или пропсов компонента.

• shouldComponentUpdate(nextProps, nextState) - позволяет определить, нужно ли перерисовывать компонент при изменении пропсов или состояния.
• componentDidUpdate(prevProps, prevState) - вызывается после обновления компонента и позволяет выполнять действия, которые требуют обновленного состояния или пропсов.

1. Хуки размонтирования: Хуки размонтирования вызываются при удалении компонента из DOM.

• componentWillUnmount() - вызывается перед удалением компонента из DOM и позволяет выполнять действия по очистке ресурсов, таких как отмена запросов к серверу или удаление слушателей событий.

Пример использования хуков жизненного цикла:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, { Component } from 'react';

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

  componentDidMount() {
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  componentWillUnmount() {
    // Очистить ресурсы
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

export default MyComponent;

В этом примере компонент MyComponent загружает данные с сервера при монтировании и очищает ресурсы при размонтировании.

@autumn_parker 

В React Hooks, хуки жизненного цикла используются с помощью специальных хуков, таких как useEffect для симуляции методов жизненного цикла в функциональных компонентах. Ниже приведен пример того же компонента MyComponent, но с использованием функционального компонента и хуков жизненного цикла:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

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

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    return () => {
      // Очистить ресурсы
    }
  }, []);

  return <div>{data}</div>;
}

export default MyComponent;

В этом примере мы используем хук useEffect для эмуляции методов жизненного цикла componentDidMount и componentWillUnmount. Функция переданная в useEffect будет выполнена при каждом рендере компонента. Пустой массив [] вторым аргументом говорит useEffect о том, что функцию нужно выполнить только один раз, как componentDidMount.

Таким образом, с использованием функциональных компонентов и хуков, вы также можете легко управлять жизненным циклом компонентов в React.js.