Какие этапы жизненного цикла есть в React?

Жизненный цикл компонентов в React

• Компонент React проходит последовательные этапы — от рендера до удаления
• Для классовых компонентов выделяют 3 фазы: Mounting, Updating и Unmounting
• Mounting: constructor → render → componentDidMount — создание компонента, инициализация и загрузка данных
• Updating: запускается после изменения пропсов или состояния и включает shouldComponentUpdate → render → componentDidUpdate
• Unmounting: componentWillUnmount используется для очистки подписок и таймеров, а также освобождения ресурсов
• В функциональных компонентах аналогичные задачи решают хуки useEffect и useLayoutEffect
• В актуальном React хуки применяются для работы с состоянием и побочными эффектами
• Знание жизненного цикла помогает управлять рендерами и повышать производительность приложения

Такой ответ демонстрирует знакомство с классовым и функциональным подходами и понимание ключевых этапов работы React.

Подробный ответ

Основной ответ

В React жизненный цикл компонента представляет собой последовательность этапов и методов, через которые он проходит от создания до удаления из DOM. В современных версиях React, начиная с 16.3 и выше, этот механизм существенно изменился благодаря появлению функциональных компонентов с хуками и обновлению API классовых компонентов. Для классовых компонентов по-прежнему выделяют 3 основные фазы: монтаж (mounting), обновление (updating) и размонтирование (unmounting).

Ключевые моменты

• Монтаж: на этом этапе компонент инициализируется и добавляется в DOM. В классовом компоненте основными методами являются constructor(), static getDerivedStateFromProps(), render() и componentDidMount(). В функциональном компоненте их аналогом выступает хук useEffect(() => {}, []).
• Обновление: фаза начинается, когда меняются пропсы или состояние компонента. Для классов используются методы static getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate(). В функциональных компонентах применяется хук useEffect(), который может выполняться при изменении зависимостей.
• Размонтирование: компонент удаляется из DOM. В классовых компонентах для этого предназначен componentWillUnmount(), а в функциональных используется useEffect с функцией очистки (return cleanup).

Практический контекст

Понимание жизненного цикла необходимо для корректной организации побочных эффектов — запросов к API, подписок и таймеров — и оптимизации производительности, например предотвращения лишних рендеров с помощью shouldComponentUpdate или мемоизации хуков. В React 18+ функциональные компоненты получили дополнительные особенности, включая асинхронный рендеринг (concurrent mode), который влияет на работу эффектов.

Итак, жизненный цикл — базовое понятие для управления логикой компонентов, особенно при переходе от классов к функциональным компонентам и хукам.