Как реализуются методы жизненного цикла в классовых компонентах React?

Что такое методы жизненного цикла?

В классовых компонентах React жизненный цикл компонента делится на три фазы: монтирование (создание и вставка в DOM), обновление (при изменении props или state) и размонтирование (удаление из DOM). Для каждой фазы существуют специальные методы, которые React вызывает автоматически. Они дают разработчику контроль над поведением компонента в ключевые моменты.

Основные методы и их применение

• constructor(props) — вызывается при создании компонента. Используется для инициализации state и привязки методов. Нельзя вызывать setState().
• render() — обязательный метод, возвращает JSX. Должен быть чистой функцией без побочных эффектов.
• componentDidMount() — вызывается сразу после монтирования компонента в DOM. Идеально подходит для запросов к API, подписок и установки таймеров.
• componentDidUpdate(prevProps, prevState) — вызывается после обновления компонента. Позволяет реагировать на изменения props или state, например, для повторного запроса данных.
• componentWillUnmount() — вызывается перед удалением компонента из DOM. Используется для очистки: отписки от событий, остановки таймеров, отмены запросов.

Пример кода

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

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.seconds === 10) {
      console.log('10 seconds reached');
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

Вывод

Методы жизненного цикла в классовых компонентах React предоставляют структурированный способ управления побочными эффектами и состоянием. Они особенно полезны в сложных компонентах, где требуется точный контроль над инициализацией, обновлением и очисткой ресурсов. Однако в современной разработке с функциональными компонентами и хуками (useEffect) эти методы используются реже, но понимание их работы остаётся важным для поддержки legacy-кода и глубокого понимания React.