Объясните последовательность этапов существования и работы компонента в React, начиная с его создания и заканчивая удалением из DOM.

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

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

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

2. Обновление (Updating) — происходит при изменении пропсов или состояния.

   • static getDerivedStateFromProps — обновление состояния.
   • shouldComponentUpdate — решает, нужно ли перерисовывать компонент.
   • render — обновление JSX.
   • getSnapshotBeforeUpdate — получение информации перед обновлением DOM.
   • componentDidUpdate — вызывается после обновления компонента.

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

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

Пример с классом:

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

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

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

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

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

В функциональных компонентах с хуками аналогичные этапы реализуются через useEffect с разными зависимостями.