ComponentDidMakeSense – Объяснение жизненного цикла компонента React

26.04.2018

React даёт вам возможность создавать собственные интерфейсы с помощью внешнего декларативного API. Нужно только указать React как должен выглядеть ваш интерфейс, а остальное он сделает сам.

Когда пользователь совершает какое-нибудь действие в приложение, изменяется состояние компонента, при этом вызывается обновление DOM. Благодаря методам, предоставленных в React, вы можете без труда перехватить эти изменения в любой момент времени и получить контроль над пользовательским интерфейсом. Понимание жизненного цикла компонента позволит вам свободно использовать React, и данная статья обеспечит вам чёткое понимание об этом фундаментальном понятии.

Жизненный цикл компонента

Для каждого компонента React в вашем проекте существует уникальный жизненный цикл.

Методы жизненного цикла - это методы, позволяющие вам перехватывать и считывать изменение состояния, а так же управлять обновлением пользовательского интерфейса. Жизненный цикл можно разбить на 3 категории:

  • Mounting (монтаж): компонент добавляется в DOM
  • Updates (обновление): компонент получает новые props или state и вызывается, когда компонент повторно отображается
  • Unmounting (размонтирование): компонент удаляется из DOM

Методы жизненного цикла предоставляют точки входа для выполнения любого из этих шагов. Метод, начинающийся с componentWill, означает, что вы обращаетесь к нему до возникновения события, а метод добавленный с использованием componentDid, означает, что вы собираетесь использовать его после того как событие произошло.

Список методов:

Mounting:

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

Updating:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

Unmounting:

  • componentWillUnmount()

Описание методов:

Constructor()

Этот метод вызывается, перед добавлением в DOM, когда ваш компонент создается. Его основное назначение - инициализировать state и .bind(this) для методов компонента. Если вам нет необходимости что-либо менять в компоненте, то конструктор вам не потребуется.

ComponentWillMount()

Этот метод вызывается непосредственно перед добавлением компонента в DOM/render(). Обычно рекомендуется использовать конструктор, однако, этот метод по-прежнему используется в React в основном для обратной совместимости.

В это методе setState не вызывает изменений, и нет возможности взаимодействовать с DOM.

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

ComponentDidMount()

На данном этапе цикла ваш компонент был уже создан и существует в DOM. В этом методе вы можете выполнять запросы к серверу, добавлять прослушиватели событий и выполнять любые операции, требующие изменить структуру DOM. Вызов setState во время этого метода приведет к повторной обработке компонента (повторное срабатывание функции render())

ComponentWillReceiveProps()

Когда ваш компонент получает новые props от своего родителя, запускается ConponentWillReceiveProps(nextProps). Это время отлично подходит для проверки наличия изменений входящего props в сравнении с текущим, и инициализации изменения состояния на основе новых значений. Обычно метод используют для сброса состояния на основе изменения.

shouldComponentUpdate()

Данный метод существует исключительно для повышения производительности. Рендеринг и проверки стоят очень дорого в React. shouldComponentUpdate(nextProps, nextState) предоставляет разработчику возможность вернуть логическое значение true/false из этого метода, который контролирует, должен ли React выполнять операции сравнения и обновление DOM.

Поведение этого метода по умолчанию заключается в том, что React отображает каждое обновление, которое хорошо работает в большинстве случаев. Если shouldComponentUpdate() возвращает значение false, то componentWillUpdate(), render() и componentDidUpdate() не будут вызываться.

ComponentWillUpdate()

React вызывает этот метод непосредственно перед рендерингом при получении новых props и state. Этот метод, вероятно, следует избегать, так как от него не так много пользы. Вы ничего не должны делать, чтобы изменить состояние в данный момент времени - используйте вместо этого другой метод componentWillReceiveProps, если вам нужно что-то сделать перед самим рендерингом.

Обратите внимание, что этот метод не вызывается при инициализации.

ComponentDidUpdate()

Вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true). Это хорошее время для взаимодействия с DOM или создания нового запроса к серверу.

CompoentWIllUnmount()

У вашего компонента была отличная жизнь, и теперь пришло время покинуть пользовательский интерфейс. Это тот момент который хорошо подходит для того чтобы очистить все, что было связано с добавлением и поддержкой вашего компонента, когда он существовал в UI.

Бонус: componentDidCatch

ComponentDidCatch(error, info) - это новый жизненный цикл компонента, который был добавлен в React 16. React был печально известен сбоями в работе всего приложения, если происходила ошибка в JavaScript. Это повреждало внутреннее состояние React, после чего рушилось все приложение и вылазили загадочные сообщения об ошибках. ComponentDidCatch решает эту проблему улавливая любую ошибку JavaScript, возникающую в дереве компонента, реализующего этот метод, для его дочерних компонентов. Метод способен отловить ошибку и отобразить резервный интерфейс.

Больше статей можно найти на сайте: codenative.ru