События жизненного цикла в React

Классовые компоненты React могут иметь несколько событий жизненного цикла.

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

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

В жизненном цикле компонента React есть 3 фазы:

• Сборка (mounting)
• Обновление (updating)
• Разборка (unmounting)
• Legacy или устаревший код

Давайте рассмотрим эти три этапа подробно, а так же методы, которые вызываются для каждого из них.

Сборка (mounting)

В процессе сборки, компонент проходит 4 этапа (метода) жизненного цикла, до полной его сборки в DOM: constructor, getDerivedStateFromProps, render и componentDidMount.

• constructor - это первый метод, который вызывается при сборки компонента. Обычно вы используете конструктор для установки начального состояния, используя this.state = ....
• getDerivedStateFromProps. Когда состояние или state зависит от props, getDerivedStateFromProps может использоваться для обновления состояния на основе значения props. Он был добавлен в React 16.3 с целью заменить устаревший метод componentWillReceiveProps. В нем у вас нет доступа к this, так как это статический метод. Он также является чистым методом, поэтому не вызывает побочных эффектов и возвращает один и тот же результат при многократном вызове с одним и тем же значением. Возвращает объект с обновленными элементами состояния (или null, если состояние не изменяется)
• render. Из метода render() вы возвращаете JSX, который создает интерфейс компонента.
• componentDidMount используется для выполнения вызовов API или обработки операций в DOM.

Обновление (updating)

При обновлении, компонент проходит 5 этапов жизненного цикла до сборки его в DOM: getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate и componentDidUpdate.

• getDerivedStateFromProps. Смотрите приведенное выше описание для данного метода.
• shouldComponentUpdate возвращает логическое значение true или false. Используется, чтобы сообщить React, следует ли делать пересборку компонента; по умолчанию имеет значение true. Значение false, можно вернуть когда повторная сборка ресурсно затратна, и вам хотелось бы иметь больше контроля в этом случае.
• render. Смотрите приведенное выше описание для данного метода.
• getSnapshotBeforeUpdate. У вас есть доступ к props и state предыдущей и текущей сборки. Его варианты использования очень нишевые и, вероятно, вы будете использовать их реже.
• componentDidUpdate. Вызывается, когда компонент был обновлен в DOM. Используйте его для запуска любого стороннего DOM API или API, которые должны обновляться при изменении DOM. Он соответствует методу componentDidMount() из фазы сборки.

Разборка (unmounting)

На этом этапе компонент проходит только один метод componentWillUnmount.

• componentWillUnmount. Вызывается, когда компонент удаляется из DOM. Используйте его, чтобы выполнить любой вид очистки, который вам нужен.

Legacy или устаревший код

Если вы работаете с приложением, которое использует componentWillMount, componentWillReceiveProps или componentWillUpdate, имейте ввиду, что в React 16.3 они уже устарели, и вам следует перейти на другие методы жизненного цикла.