Какие методы жизненного цикла в React важны на практике и чем они отличаются?
Жизненный цикл
В классовых компонентах на практике важны три основных метода — по одному на каждую фазу жизни компонента — плюс несколько специализированных.
Основная тройка
- componentDidMount() — после первой вставки в DOM. Место для запросов данных, подписок, работы с DOM. Вызывается один раз.
- componentDidUpdate(prevProps, prevState) — после каждого обновления. Здесь реагируют на изменения:
if (prevProps.userId !== this.props.userId) this.loadUser(). Ошибка сравнения → бесконечный цикл. - componentWillUnmount() — перед удалением из DOM. Очистка: таймеры, подписки, отмена запросов.
Специализированные
- shouldComponentUpdate(nextProps, nextState) — вернуть
false, чтобы пропустить перерендер; ручная оптимизация (аналог React.memo). PureComponent делает это автоматически поверхностным сравнением. - static getDerivedStateFromProps(props, state) — синхронно вычислить state из props перед рендером; нужен редко, часто заменяется правильным подъёмом состояния.
- getSnapshotBeforeUpdate(prevProps, prevState) — снять данные из DOM (например, позицию скролла) до применения изменений; результат приходит третьим аргументом в componentDidUpdate.
- componentDidCatch(error, info) / static getDerivedStateFromError(error) — перехват ошибок детей; основа Error Boundaries, аналогов в хуках нет.
Устаревшие
componentWillMount, componentWillReceiveProps, componentWillUpdate — помечены как UNSAFE_ и не должны использоваться (ломают конкурентный рендеринг).
Соответствие хукам
- componentDidMount →
useEffect(fn, []) - componentDidUpdate →
useEffect(fn, [deps]) - componentWillUnmount → cleanup-функция эффекта
- shouldComponentUpdate →
React.memo
Коротко для собеседования
Главные: componentDidMount (инициализация), componentDidUpdate (реакция на изменения, со сравнением prevProps), componentWillUnmount (очистка). Для оптимизации — shouldComponentUpdate/PureComponent, для ошибок — componentDidCatch (Error Boundary). componentWill*-методы устарели.