Какие этапы жизненного цикла существуют у классового компонента и как их реализовать?

Жизненный цикл классового компонента в React включает несколько основных этапов, каждый из которых представлен соответствующими методами:

1. Монтирование (Mounting) — когда компонент создаётся и вставляется в DOM.

   • constructor(props) — инициализация состояния и привязка методов.
   • static getDerivedStateFromProps(props, state) — синхронизация состояния с пропсами (редко используется).
   • render() — рендер разметки.
   • componentDidMount() — вызывается после вставки компонента в DOM, здесь удобно делать запросы к API или подписываться на события.

2. Обновление (Updating) — когда компонент получает новые пропсы или изменяется состояние.

   • static getDerivedStateFromProps(props, state) — обновление состояния на основе новых пропсов.
   • shouldComponentUpdate(nextProps, nextState) — позволяет оптимизировать перерисовку, возвращая true/false.
   • render() — повторный рендер.
   • getSnapshotBeforeUpdate(prevProps, prevState) — получение информации перед обновлением DOM.
   • componentDidUpdate(prevProps, prevState, snapshot) — вызывается после обновления, можно работать с DOM.

3. Размонтирование (Unmounting) — когда компонент удаляется из DOM.

   • componentWillUnmount() — очистка таймеров, отмена подписок.

Пример реализации:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Компонент смонтирован');
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Компонент обновился');
  }

  componentWillUnmount() {
    console.log('Компонент будет размонтирован');
  }

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