Перечислите методы жизненного цикла компонентов в React.

В React, в основном, используются методы жизненного цикла классовых компонентов. Для функциональных компонентов их заменяют хуки, в частности useEffect.

Основные методы жизненного цикла классовых компонентов:

Фаза монтирования (Mounting):

• constructor(props): Инициализация состояния и привязка методов.
• static getDerivedStateFromProps(props, state): Редко используемый метод для синхронизации состояния с пропсами. Возвращает объект для обновления состояния или null.
• render(): Обязательный метод, возвращающий JSX для отображения.
• componentDidMount(): Вызывается после того, как компонент и все его дочерние компоненты отрендерены в DOM. Идеально для выполнения запросов данных, подписок.

Фаза обновления (Updating):

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

Фаза размонтирования (Unmounting):

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

Обработка ошибок (Error Handling):

• static getDerivedStateFromError(error): Вызывается при возникновении ошибки в дочерних компонентах. Возвращает объект для обновления состояния Error Boundary.
• componentDidCatch(error, errorInfo): Вызывается после возникновения ошибки. Используется для логирования ошибок.

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

// class MyComponent extends React.Component {
// constructor(props) {
//   super(props);
//   this.state = { data: null };
// }

// componentDidMount() {
//   // Получение данных после монтирования
//   fetch('/api/data')
//     .then(response => response.json())
//     .then(data => this.setState({ data }));

//   // Подписка на событие
//   this.timerId = setInterval(() => {
//     console.log('Таймер запущен');
//   }, 1000);
// }

// componentWillUnmount() {
//   // Отмена подписки перед размонтированием
//   clearInterval(this.timerId);
//   console.log('Таймер остановлен');
// }

// render() {
//   return (
//     <div>
//       {this.state.data ? <p>{this.state.data.message}</p> : <p>Загрузка данных...</p>}
//     </div>
//   );
// }
// }