1. Жизненный цикл компонента React
2. Этап сборки компонента
3. Пояснения к примеру
4. Шаг обновления компонента
5. Пояснения к примеру
6. Этап разборки компонента
7. суммирование

Я много писал в блоге Reacta в блоге ... Я до сих пор не затронул очень важную проблему - жизненный цикл компонента React . Я думаю, что даже один из читателей попросил меня поднять эту тему в личном сообщении ... Вот почему мы будем иметь дело с этим вопросом сегодня!

Я думаю, что нет смысла продолжать это. Эта запись является расширением знаний, которые я предоставил в посте на основах React - Я написал там, среди других Для чего предназначен компонент React, для чего предназначен метод render () и т. д. Сегодня я представлю более подробную информацию о других методах компонента React.

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

В целом, класс React.Component, от которого мы наследуем наши собственные компоненты, имеет несколько методов, вызываемых в разное время в своем жизненном цикле. Эти методы, конечно, могут быть перегружены в наших компонентах. Одним из таких методов является уже упоминавшийся метод render (), который должен быть перегружен каждым компонентом. Перегрузка оставшихся не требуется, и мы можем использовать их только тогда, когда они нам нужны.

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

• Монтирование («mount») - следующие методы вызываются, когда компонент создается и добавляется в дерево DOM:
  • Конструктор ()
  • componentWillMount ()
  • рендеринга ()
  • componentDidMount ()
• Обновление («обновление») - следующие методы вызываются, если изменяется состояние компонента или переменные, хранящиеся в объекте this.props:
  • componentWillReceiveProps ()
  • shouldComponentUpdate ()
  • componentWillUpdate ()
  • рендеринга ()
  • componentDidUpdate ()
• Dismounting ("unmount") - метод, вызываемый при удалении компонента из дерева DOM:

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

Ниже я представляю каждый из этапов жизненного цикла компонента React с примерами вызовов отдельных методов!

Этап сборки компонента

Я думаю, что метод жизненного цикла компонента React, вызываемый на этапе сборки компонента, может быть интересно проиллюстрировать на примере. Итак, посмотрите на следующий компонент React:

импорт React из 'реакции'; импорт службы из ./service; Класс MyComponent расширяет React. Компонент {конструктор (реквизит) {супер (реквизит); это. состояние = {данные: []}; } componentWillMount () {console. log ('это вызывается перед рендерингом!'); } componentDidMount () {это. обслуживание. getData (). then (response => {this. setState ({data: response. data})}); } render () {return (<div> {this. state. map ((item, index) => {return <div key = {index}> {item. name} </ div>;})} < / div>); }} экспорт по умолчанию MyComponent;

Пояснения к примеру

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

Еще один метод, который будет вызываться на этапе сборки компонента MyComponent, - componentWillMount (). Как видите, я только ввел логин в консоль. Это неподходящее место для вызова метода this.setState () или для вызова запросов AJAX. Все потому, что метод вызывается до вызова метода render (). Поэтому обновление состояния на этом этапе не будет повторно отображаться, и, следовательно, на экране будет отображаться начальное состояние , а не обновленное. Как правило, этот метод используется довольно редко.

Метод render () находится в очереди рядом. Я думаю, что в моем посте много говорилось об основах ReactJS. В этом примере показана итерация с использованием метода Array.map () после элементов массива this.state.data. Помните, однако, что на этом этапе это все еще пустая таблица - на этапе сборки для визуализации используется начальное состояние , которое мы установили в конструкторе. Только позже, на этапе освежения, этот метод будет вызван снова ... но об этом чуть позже.

Сразу после первого рендеринга компонента на экране последний метод этого шага называется - componentDidMount (). Пример показывает, что я вызываю метод getData () некоторого гипотетического сервиса под названием service. Используя метод then (), вы, вероятно, можете догадаться, что это вызов AJAX, а метод getData () возвращает «обещание». В ответ на это «обещание» состояние компонента обновляется (с помощью метода this.setState ()).

Метод componentDidMount () является наиболее подходящим местом для обновления состояния компонента либо напрямую, либо в результате вызова AJAX. Если вы используете Redux, вам следует вызвать действие, которое обновляет исходное состояние с помощью запросов API. Обновление состояния в этом методе, а также в других, например, реакция на взаимодействие с пользователем, инициирует этап обновления компонента . Подробнее об этой теме ниже.

Шаг обновления компонента

Чтобы объяснить жизненный цикл компонента React на этапе обновления, я немного изменю наш примерный компонент:

импорт React из 'реакции'; импорт службы из ./service; Класс MyComponent расширяет React. Компонент {конструктор (реквизит) {супер (реквизит); это. состояние = {данные: []}; } componentWillMount () {console. log ('это вызывается перед первым рендерингом!'); } componentDidMount () {это. обслуживание. getData (). then (response => {this. setState ({data: response. data})}); } componentWillReceiveProps (nextProps) {if (nextProps. reset) {this. setState ({data: []}); }} shouldComponentUpdate (nextProps, nextState) {console. log («возвращение false предотвратит повторный рендеринг!»); // return false; } componentWillUpdate (nextProps, nextState) {console. log ('это вызывается перед повторным рендерингом!'); } componentDidUpdate (prevProps, prevState) {if (this. props. getDataAgain) {this. обслуживание. getData (). then (response => {this. setState ({data: response. data})}); }} render () {return (<div> {this. state. map ((item, index) => {return <div key = {index}> {item. name} </ div>;})} </ div>); }} экспорт по умолчанию MyComponent;

Пояснения к примеру

Например, на этапе сборки я добавил несколько новых методов, отвечающих за обработку этапа обновления. Ниже несколько слов о каждом методе.

Первый метод, вызываемый на этапе обновления компонента, - componentWillReceiveProps (). Для этого метода в качестве параметра передается объект, содержащий новые «реквизиты». Таким образом, мы можем использовать его, чтобы проверить, произошло ли обновление в результате изменения объекта this.props (объект this.props не обновляется на данном этапе). Это также место, где разрешен метод this.setState (). В этом примере я проверяю, содержат ли новые «реквизиты» свойство сброса со значением true, и если это так, я «очищаю» состояние, устанавливая значение свойства data обратно в пустой массив.

Следующий метод жизненного цикла компонента React, вызываемый на этом этапе, - shouldComponentUpdate (). По умолчанию компонент React перерисовывается всякий раз, когда изменяется статус или объект this.props. Тем не менее, с помощью этого метода вы можете управлять им! Достаточно, чтобы он возвратил false, и все последующие методы жизненного цикла будут отменены . Чтобы помочь нам решить, следует ли отменить повторный рендеринг, этот метод принимает два параметра: nextProps и nextState. Они содержат соответственно: новый объект this.props и новое состояние компонента. Таким образом, вы можете использовать их, например, чтобы сравнить их с их текущими значениями и т. Д.

Давайте пойдем дальше - следующий метод - это метод componentWillUpdate (), который имеет то же назначение, что и ранее упомянутый метод componentWillMount (). Он вызывается непосредственно перед методом render () и не должен содержать вызов this.setState (), потому что он не вызовет повторного рендеринга.

Теперь пришло время вызвать метод render (). На этом этапе статус уже обновлен , поэтому в нашем примере массив this.state.data больше не пуст. По этой причине данные, загруженные с сервера, будут отображаться на экране в это время.

В конце шагов обновления вызывается метод componentDidUpdate (), который эквивалентен методу componentDidMount (), известному на этапе монтирования. Он принимает следующие параметры: prevProps и prevState, которые содержат предыдущее значение объекта this.props и состояние компонента. Это также место, где мы можем обновить состояние компонента и т. Д. В примере, если для свойства getDataAgain объекта this.props установлено значение true, я обновляю данные, хранящиеся в состоянии компонента.

Этап разборки компонента

В дополнение к двум рассмотренным выше, жизненный цикл компонента React все еще имеет этап разборки компонента. Для поддержки этого этапа у нас есть только один метод, доступный для перегрузки: componentWillUnmount (). Я думаю, что нет смысла показывать ей пример. Достаточно знать, что он не принимает никаких аргументов и используется для выполнения каких-либо задач очистки .

Так что если вы используете, например, Reduxa от RxJS тогда здесь можно вызвать отмену запросов к серверу. Если вы добавили некоторые дополнительные динамически созданные элементы DOM в метод componentDidMount (), здесь вы можете их очистить ... и т. Д. И т. Д. В целом, исходя из моего опыта работы с React, я могу сказать, что этот метод используется не так часто, как некоторые из ранее упомянутых (что наиболее распространенным методом является render (), а componentDidMount () находится на втором месте).

суммирование

Вот вам и жизненный цикл компонента React . Я думаю, что стоит знать все методы, обсуждаемые сегодня, и порядок их вызова. Кроме того, мне кажется, что они дают хорошее представление о том, как работает React - как состояние компонента связано с тем, что отображается на экране, и каков эффект этого изменения. Я надеюсь, что мне удалось описать все достаточно доступным способом. Если у вас есть какие-либо вопросы, я приглашаю вас прокомментировать под статьей. Я также всегда открыт для личных сообщений, отправленных контактная форма !

Похожие