JS: React → Component Lifecycle

Обычный компонент в Реакте содержит основную функцию render и выглядит так:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Или, что еще лучше, представляет из себя функцию. Но бывают ситуации, когда этого недостаточно. Типичная история — это инициализация данными. Например, после подключения компонента нужно сходить за данными на сервер и установить их в стейт. Выполнять эту задачу в функции render по понятным причинам нельзя. Другой пример связан с задачей использовать внутри реакта библиотеки для него не предназначенные. В такой ситуации нужно иметь доступ к реальной DOM ноде.

Любой компонент Реакта сам по себе участвует в процессе своего существования, а раз есть процесс, то есть и конечный автомат. Этот процесс называют "Component Lifecycle".

Как видно из картинки, компонент не просто рендерится, он так же вставляется в реальный DOM, удаляется из него, получает новые свойства, новое состояние и так далее. На каждый такой переход можно реализовать функцию-коллбек, которая будет вызвана Реактом во время соответствующего перехода.

Реакт проверяет, реализованы ли соответствующие функции в классе. Если да, то вызывает их в нужные моменты. Если нет, то ничего не происходит.

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

Mounting

Процесс монтирования немного особый, так как выполняется ровно один раз.

1. constructor() - обычный конструктор, мы уже имели с ним дело.
2. componentWillMount() - вызывается перед тем, как монтировать компонент в DOM.
3. render() - генерация виртуального DOM.
4. componentDidMount() - вызывается после того, как компонент был вставлен в реальный DOM.

Коллбеки монтирования отрабатывают только при появлении нового элемента в DOM. Это всегда справедливо для корневого компонента, который монтируется через ReactDOM.render(). Остальные компоненты могут проходить этот процесс не раз. Все зависит от того, пропадают ли они из DOM или нет.

See the Pen js_react_component_lifecycle_mounting by Hexlet (@hexlet) on CodePen.

В моей практике в основном используется componentDidMount, так как в этот момент уже доступен DOM и можно с ним работать. Но это тема одного из следующих уроков.

Updating

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()

Коллбеки, описанные выше, запускаются только для обновления уже примонтированного компонента. Другими словами, они не запускаются тогда, когда компонент появляется в DOM в первый раз.

Unmounting

• componentWillUnmount()