Skip to content

Latest commit

 

History

History
186 lines (150 loc) · 7.65 KB

README.md

File metadata and controls

186 lines (150 loc) · 7.65 KB
Raw

Исследуем React lifecycle

Содержание

  1. Жизненный цикл
  2. Создание и иницилизация компонента
    1. constructor
    2. static getDerivedStateFromProps
    3. render
    4. componentDidMount
  3. Обновление компонента
    1. shouldComponentUpdate
    2. getSnapshotBeforeUpdate
    3. componentDidUpdate
  4. componentWillUnmount
  5. deprecated
    1. Mounting process
    2. Updating process
    3. StrictMode
  6. componentDidCatch
  7. Полезные ссылки

Жизненный цикл

lifecycle

Создание и иницилизация компонента

  1. constructor
  2. getDerivedStateFromProps
  3. componentDidMount

constructor

constructor

Можно

  • Установите изначальное состояние компонента
  • Задайте значение state
  • “Привяжите” this к вашим функциям, если не используете стрелочные функции для методов
  • Создайте "связи" для взаимодействия с DOM узлами или элементами React, определяемыми в методе render.

Нельзя

  • Не выполняйте никаких сайд-эффектов

Избегайте

  • Копирования свойств props в state, они будут доступны и так. Исключением можно считать случай, когда мы хотим игнорировать обновления props

static getDerivedStateFromProps(props, state)

Статическая функция (нет доступа к this), возращает объект или null. Возвращаемый объект "вливается" в существующее состояние компонента. Отрабатывает при инициализации компонента, изменении props, setState и this.forceUpdate (с 16.4.2).

Можно

  • Синхронизируйте ваши props и state (замена устаревшему componentWillReceiveProps(nextProps)).

render

Нужно

  • Определить, каким будет DOM

Нельзя

  • Не выполняйте this.setState - приведет к зацикливанию

componentDidMount

Сигнализирует о том, что компонент и все его дочерние компоненты отрисовались без ошибок

Можно

  • Установить счетчики/"листенеры"...
  • Выполнить сайд-эффекты (Вызовы AJAX и т.д.)

Не рекомендуется

  • Не стоит вызывать this.setState, так как это приведет к перерисовке

Обновление компонента

  1. getDerivedStateFromProps
  2. shouldComponentUpdate
  3. getSnapshotBeforeUpdate
  4. componentDidUpdate

shouldComponentUpdate

Возвращает true/false. При false процесс обновления останавливается. При наследовании от PureComponent от метод уже реализован и использует swallowEqual

Можно

  • Определить свои правила обновления компонента

Нельзя

  • Не выполняйте this.setState - приведет к зацикливанию

shallowEqual

При сравнении объектов проверяется количество полей. Хорошее место для "нехорошего" хака

getSnapshotBeforeUpdate

Можно

  • Передать в componentDidUpdate третьим параметром дополниельные данные

Нельзя

  • Не выполняйте this.setState - приведет к зацикливанию

componentDidUpdate

Можно

  • Установить счетчики/"листенеры"...
  • Выполнить сайд-эффекты (Вызовы AJAX и т.д.)
  • Выполнить this.setState, но вызов должен быть по условию, иначе приведет к зацикливанию

componentWillUnmount

Нужно

  • Удалить все назначенные счетчики/"листенеры"...
  • Отменить AJAX запросы для этого компонента

Нельзя

  • Не выполняйте this.setState

deprecated

  • componentWillMount
  • componentWillReceiveProps(nextProps)
  • componentWillUpdate(nextProps, nextState)

Рекомендуется с версии 16.3 использовать эти методы жизненного цикла с префиксом UNSAFE

  • UNSAFE_componentWillMount
  • UNSAFE_componentWillUpdate
  • UNSAFE_componentWillReceiveProps

Mounting process

В каком порядке вызываются методы

constructor()
static getDerivedStateFromProps()
UNSAFE_componentWillMount()
render()
componentDidMount()

Updating process

В каком порядке вызываются методы

UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

StrictMode

  • Сообщает о "небезопасных" методах lifecycle
  • Предупреждает об использовании устаревшего ref API
  • Сигнализирует о старом context API
  • Отслеживание неожидаемых сайд-эффектов

StrictMode

componentDidCatch

Отлавливает ошибки javascript во всех дочерних компонентах

Принимает два параметра:

  • error - текстовая ошибка, что мы видим в консоли
  • info - объект с полем componentStack, которое предоставляет "путь" до ошибки

Можно вызвать setState, чтобы обновить UI

Не отлавливает ошибки в:

  • Обработчики событий (# onClick)
  • Асинхронный код (# Timeout)
  • SSR
  • Компонент с таким методом не ищет проблемы в самом себе

Полезные ссылки