Изучите методы жизненного цикла React и когда / как их использовать
React невероятен, потому что позволяет создавать пользовательский интерфейс с помощью декларативного API. Вы указываете React, как должен выглядеть интерфейс, а все остальное он делает.
Когда пользователи взаимодействуют с приложением, состояние изменяется, что вызывает обновления DOM. React предоставляет набор методов для беспрепятственного перехвата изменений в любой момент во время обновлений и получения контроля над пользовательским интерфейсом. Жизненный цикл компонента обычно является одним из последних этапов на пути к истинному освоению React, и эта статья гарантирует, что у вас есть твердое понимание.
Жизненный цикл компонента можно определить как время с момента, когда компонент впервые вставляется в DOM, все время, когда компонент находится в DOM, и момент, когда компонент удаляется из DOM. У каждого компонента React в вашем коде уникальный жизненный цикл.
Обзор жизненного цикла
Методы жизненного цикла - это перехватчики, позволяющие читать изменения состояния и управлять обновлениями пользовательского интерфейса. Жизненный цикл можно разбить на 3 категории:
- Монтирование: компонент добавляется в DOM.
- Обновления: компонент получает изменения свойств или состояния и вызывается при повторной визуализации компонента.
- Размонтирование: компонент удаляется из DOM.
Методы жизненного цикла предоставляют точки входа для выполнения любого из этих шагов. Любой метод, который начинается с componentWill, означает, что вы обращаетесь к нему до того, как произойдет событие, а любой метод с добавлением componentDid означает, что вы захватываете его после того, как событие происходит.
Монтаж
constructor()componentWillMount()render()componentDidMount()
Обновление
componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()
Размонтирование
componentWillUnmount()
конструктор
Этот метод вызывается при создании вашего компонента и перед монтированием (добавлением в DOM). Его основное использование - инициализация состояния и .bind(this) методов компонента. Если вы не сделаете ни то, ни другое, конструктор не нужен.
componentWillMount
Этот метод выполняется прямо перед добавлением компонента в DOM / render(). Обычно рекомендуется использовать constructor, но этот метод по-прежнему включен в API в основном для обратной совместимости.
Вам следует избегать вызова каких-либо функций, вызывающих побочные эффекты в этом методе, поскольку setState не инициирует изменение и нет DOM, с которым можно было бы взаимодействовать.
Обратите внимание, что это также единственный метод жизненного цикла, вызываемый на сервере.
componentDidMount
Теперь ваш компонент отрисован и существует в DOM. Это момент, когда вы должны инициировать запросы AJAX, добавить прослушиватели событий и выполнить любую настройку, которая требует DOM. Вызов setState во время этого метода или в любое время после него вызовет повторный рендеринг.
componentWillReceiveProps
Когда ваш компонент получает новые реквизиты от своего родителя, запускается componentWillReceiveProps(nextProps). Это отличное время, чтобы проверить, есть ли изменения во входящих реквизитах по сравнению с вашими текущими реквизитами, и инициировать изменение состояния на основе новых значений. Обычным вариантом использования для этого является сброс состояния на основе изменения.
shouldComponentUpdate
Этот метод существует исключительно для улучшения производительности. Рендеры и согласования в React обходятся дорого. shouldComponentUpdate(nextProps, nextState) предоставляет разработчику возможность возвращать логическое true/false из этого метода, который определяет, должен ли React выполнять операции согласования и обновления DOM.
По умолчанию React отображает каждое обновление, что в большинстве случаев работает. Если shouldComponentUpdate() возвращает false, то componentWillUpdate(), render() и componentDidUpdate() не будут вызваны.
componentWillUpdate
React вызывает этот метод непосредственно перед рендерингом при получении новых свойств или состояний. От componentWillUpdate(nextProps, nextState) не так много пользы, и его, вероятно, следует избегать (аналогично componentWillMount). Вы не должны делать ничего, что могло бы изменить состояние на этом этапе - используйте componentWillReceiveProps, если вам нужно что-то сделать перед рендерингом.
Обратите внимание, что этот метод не вызывается при первоначальной визуализации.
componentDidUpdate
Сразу после того, как React создаст новый блестящий пользовательский интерфейс, вызывается componentDidUpdate(prevProps, prevState). Это прекрасное время для взаимодействия с DOM или создания нового сетевого запроса в зависимости от того, как должен выглядеть новый интерфейс.
componentWillUnmount
У вашего компонента была отличная жизнь, и теперь ему пора покинуть пользовательский интерфейс. Настал момент очистить все, что было связано с добавлением и поддержкой вашего компонента, пока он находился в пользовательском интерфейсе.
БОНУС: componentDidCatch
componentDidCatch(error, info) - это новый жизненный цикл, который был добавлен в React 16. React был известен тем, что приводил к сбою всего приложения, если в приложении React была выдана ошибка JavaScript. Он повредил внутреннее состояние React, что привело к взрыву приложения и появлению загадочных сообщений об ошибках. componentDidCatch решает эту проблему, перехватывая любую ошибку JavaScript, возникающую в дереве компонентов, для дочерних элементов компонента, реализующего метод. Он может фиксировать ошибку и отображать резервный пользовательский интерфейс.
Если вы нашли эту статью полезной, нажмите 👏 . Следуй за мной, чтобы увидеть больше статей о React, Node.js, JavaScript и программном обеспечении с открытым исходным кодом! Вы также можете найти меня в Twitter или gitconnected.
