Недавно я начал больше экспериментировать с ReactJS, и один из его аспектов, на котором я хотел бы сосредоточиться в этом посте, - это его методы жизненного цикла. По сути, методы жизненного цикла - это специальные методы, предоставляемые фреймворками JavaScript, которые позволяют пользователям подключаться к представлениям при возникновении определенных условий (например, когда представление сначала отображается, когда представление обновляется новыми данными и т. Д.).
Вы могли заметить, что в моем определении выше я упоминал, что методы жизненного цикла предоставляются разными фреймворками / библиотеками JavaScript - иными словами, они не являются чем-то уникальным для ReactJS. Фактически, такие фреймворки, как AngularJS и BackboneJS / MarionetteJS, также имеют эту концепцию. Я не буду вдаваться в подробности того, как они работают в других фреймворках, но я обнаружил, что методы жизненного цикла в ReactJS легче понять, потому что они заставляют пользователей действительно думать о состоянии и свойствах и побуждают пользователей писать код более функциональный стиль.
Цель этого поста - не столько учебник, сколько исследование различных методов жизненного цикла в ReactJS. Я надеюсь, что изучение этих методов приведет к лучшему пониманию того, когда и как использовать их в эффективном коде ReactJS.
Начиная
Я делю свой анализ методов жизненного цикла на 2 категории:
- Когда компоненты ReactJS монтируются и размонтируются
- Когда компоненты ReactJS обновляются новыми данными через состояние и свойства
Методы жизненного цикла - Монтаж / демонтаж
Прежде чем углубиться в этот раздел, давайте разберемся с терминологией: когда мы говорим о методах жизненного цикла на этапе монтажа компонента ReactJS, нас особенно интересуют методы, которые вызываются при первой инициализации компонента и внедрено в DOM. Точно так же размонтирование имеет дело с методами жизненного цикла, которые вызываются, когда компонент окончательно удаляется из DOM. Это означает, что методы жизненного цикла в этом разделе вызываются только один раз за время существования компонента. В следующем разделе будут рассмотрены методы жизненного цикла, которые вызываются несколько раз в течение срока службы компонента.
Я пошел вперед и подготовил простую суть, в которой выделяются методы, которые вызываются при первом монтировании компонента. Хотя я не буду вдаваться в подробности о том, как настроить Webpack и BabelJS для проекта ReactJS, я обнаружил, что руководство для начинающих Пита Ханта - отличная отправная точка без излишеств.
Предполагая, что вы настроили это в HTML-файле, вы сможете проверить в консоли своего браузера порядок, в котором выполняются эти методы жизненного цикла.
getDefaultProps и getInitialState
Эти два метода жизненного цикла возникают один раз и происходят раньше других методов жизненного цикла, и если мы задумаемся о том, для чего они используются, это имеет смысл. По сути, эти два метода настраивают компонент с его начальными данными, чтобы другие методы могли использовать данные для дополнительных функций и рендеринга.
componentWillMount
Этот метод жизненного цикла выполняется непосредственно перед первоначальной визуализацией компонента. Важно отметить, что компонент пока недоступен в DOM, поэтому вам не следует выполнять какие-либо манипуляции с DOM в этом методе. Еще одно неуловимое следствие заключается в том, что даже если состояние компонента было инициализировано, поскольку компонент еще не отрисован, вы можете вызвать this.setState в этом методе и выполнить визуализацию компонента с этим обновленным состоянием.
оказывать
Я не считаю рендеринг методом жизненного цикла как таковым, но в контексте этого сообщения я думаю, что имеет смысл включить его в обсуждение. Из методов в приведенной выше сущности это единственный, который вызывается несколько раз в течение срока службы компонента, потому что рендеринг не используется только во время фазы монтирования / размонтирования - он также выполняется каждый раз, когда компонент обновляется с новым состоянием или данными реквизита. .
Самым важным моментом в методе рендеринга является то, что он должен быть чистым. Это означает, что он не должен выполнять какие-либо действия, которые имеют побочные эффекты - думайте об этом как о черном ящике, где предоставление одного и того же состояния и данных props всегда будет выводить один и тот же результат каждый раз.
componentDidMount
componentDidMount является аналогом componentWillMount в том смысле, что это происходит сразу ПОСЛЕ того, как компонент был смонтирован и отрисован изначально. На данный момент компонент доступен в DOM, и это идеальное место для выполнения любых дальнейших манипуляций с DOM. Это также идеальное место для выполнения любой логики настройки, включающей вызовы AJAX.
componentWillUnmount
Предполагая, что у вас есть копия моей сути, работающая в вашем проекте, если вы внимательно посмотрите на консоль своего браузера, вы заметите, что этот метод жизненного цикла не выполняется. Это имеет смысл, потому что мы не запускали код, который удалял бы компонент из DOM. Но поверьте мне, когда я говорю, что этот метод жизненного цикла вызывается прямо ДО того, как компонент будет отключен / удален из DOM. Этот метод жизненного цикла - идеальное место для любой имеющейся у вас логики очистки. Классический пример - это когда компонент имеет некоторую логику, которая была настроена с помощью window.setInterval - вам нужно очистить setInterval в этом методе, чтобы логика не продолжала выполняться даже после того, как компонент был удален из DOM.
Методы жизненного цикла - обновления состояния и свойств
Методы жизненного цикла в предыдущем разделе касаются того, что происходит, когда компонент ReactJS инициализируется (т. Е. Монтируется) и когда он удаляется из DOM (т. Е. Размонтируется). Те, что в этом разделе, происходят всякий раз, когда компонент обновляет свое состояние и данные реквизита - это означает, что в отличие от предыдущих, которые выполняются один раз за время жизни компонента, они выполняются много раз.
Основное различие между этим и предыдущим состоит в том, что теперь у нас есть как ParentComponent, так и ChildComponent. Однако на самом деле в центре внимания находится только ChildComponent - ParentComponent здесь просто для того, чтобы предоставить механизм для отправки обновленных данных props в ChildComponent.
componentWillReceiveProps
Это первый метод жизненного цикла, вызываемый при обновлении данных свойств компонента. Глядя на документацию ReactJS, мы видим, что это НЕ вызывается во время первоначального монтирования компонента и что его основная цель - предоставить ChildComponent механизм для обновления своего собственного состояния на основе props передаются в него из родительского компонента. Это также означает, что вызов this.setState в этом методе жизненного цикла НЕ запускает дополнительную визуализацию для компонента.
shouldComponentUpdate
Метод жизненного цикла shouldComponentUpdate действует как шлюз, предоставляя пользователям механизм, позволяющий диктовать, должен ли этот компонент фактически повторно отрисовываться на основе нового состояния и данных реквизита. Как следует из названия, он возвращает логическое значение и по умолчанию возвращает true. Но вы можете настроить его так, чтобы он возвращал false в сценариях, в которых вы не хотите, чтобы компонент повторно отображался.
Важно отметить, что даже если компонент не выполняет повторную визуализацию, состояние по-прежнему поддерживается компонентом - единственное, что происходит, когда этот метод жизненного цикла возвращает false, - это то, что последующие методы жизненного цикла (componentWillUpdate, render и componentDidUpdate) не будет выполняться для этого конкретного обновления.
componentWillUpdate / render / componentDidUpdate
Эти 3 метода жизненного цикла очень похожи на методы из предыдущего раздела. componentWillUpdate вызывается прямо ДО того, как компонент визуализируется с новыми данными, а componentDidUpdate вызывается сразу ПОСЛЕ.
Упражнение для читателей
Теперь, когда мы изучили различные методы жизненного цикла компонента, я оставлю вам заключительную суть, которая рассматривает последовательность, в которой эти методы жизненного цикла вызываются для каждого родительского и вложенного дочернего компонента.
Вот вывод консоли браузера, когда компоненты в этой сути изначально отображаются на экране:
Наиболее интересным аспектом этого вывода является то, как getDefaultProps для ParentComponent и ChildComponent выполняется перед любыми другими методами жизненного цикла. Я изначально ожидал, что getDefaultProps ChildComponent будет выполнен позже, но затем документация поясняет, что getDefaultProps вызывается один раз и кешируется при создании класса.
Вот вывод консоли браузера, когда компоненты в этой сущности обновляются с новыми данными состояния и свойств:
Приятно видеть, что состояние ParentComponent изменилось, срабатывает функция рендеринга, которая затем каскадно переходит к ChildComponent. Обо всем этом позаботится ReactJS, и нам на одну вещь меньше беспокоиться!
Заключение
Надеюсь, вы нашли этот пост полезным для изучения методов жизненного цикла компонентов ReactJS. Я уверен, что упустил массу деталей, но, надеюсь, это дает наглядный пример, на котором вы можете продолжить изучение!
