Как устроен жизненный цикл компонента

Жизненный цикл компонента в React состоит из трех основных фаз:

1. Монтирование (Mounting):
   • constructor() – инициализация состояния
   • render() – отрисовка компонента
   • componentDidMount() – компонент вмонтирован в DOM (идеально для запросов к API)

2. Обновление (Updating):

   • shouldComponentUpdate() – можно отменить обновление для оптимизации
   • render() – перерисовка
   • componentDidUpdate() – обновление завершено (осторожно с setState!)

3. Размонтирование (Unmounting):

   • componentWillUnmount() – очистка (таймеры, подписки)

Пример:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

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

  // ... остальные методы
}

Современные приложения используют хуки (useEffect) для управления жизненным циклом в функциональных компонентах.