React-компоненты проходят через три основные фазы жизненного цикла:
Эта фаза происходит, когда компонент создаётся и вставляется в DOM. Ключевые методы:
constructor() — инициализация state и привязка методовgetDerivedStateFromProps() — обновление state на основе propsrender() — возврат JSX для рендерингаcomponentDidMount() — выполнение побочных эффектов после вставки в DOMЭта фаза происходит, когда компонент получает новые props или меняется state. Ключевые методы:
getDerivedStateFromProps() — синхронизация state с propsshouldComponentUpdate() — оптимизация производительности через управление перерендерингомrender() — возврат обновлённого JSXgetSnapshotBeforeUpdate() — снятие снимка DOM до применения измененийcomponentDidUpdate() — выполнение побочных эффектов после обновления DOMЭта финальная фаза происходит, когда компонент удаляется из DOM:
componentWillUnmount() — очистка ресурсов, таймеров и подписокReact также следует внутренним фазам при применении изменений:
Компонент рендерится без побочных эффектов. React может приостановить, отменить или перезапустить эту фазу без последствий.
Происходит до применения изменений в DOM. Позволяет React читать информацию о DOM через getSnapshotBeforeUpdate().
React применяет изменения к DOM и вызывает методы жизненного цикла:
componentDidMount() — при монтированииcomponentDidUpdate() — при обновленииcomponentWillUnmount() — при демонтированииМетод render() вызывается как на этапе монтирования, так и на этапе обновления, но гарантированно остаётся чистым и свободным от побочных эффектов.
Новый — ещё не проверен сообществом
Вы