Исследуем 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. Полезные ссылки

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

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

1. constructor
2. getDerivedStateFromProps
3. componentDidMount

---

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 - приведет к зацикливанию

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

---

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
• Отслеживание неожидаемых сайд-эффектов

componentDidCatch

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

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

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

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

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

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

---

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

• Официальный сайт React.js
• React 16.3 Lifecycle Methods
• Understanding React — React 16.3 + Component life-cycle
• UNSAFE_componentWillReceiveProps()
• Easy Way to Understand React's Component Lifecycle Methods