Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Мастеринг с методами жизненного цикла React

by
Read Time:9 minsLanguages:

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

Обзор

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

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

Обратите внимание, что в этом уроке я использую современный стиль классов ES6.

Компонент PopularBar

Я буду использовать компонент под названием PopularBar, чтобы проиллюстрировать все методы жизненного цикла и как они себя ведут. Полный исходный код доступен на GitLab.

В PopularBar есть два других компонента, называемых ClickCounter. Каждый компонент ClickCounter содержит кнопку с emoji и отображает количество кликов, добавленных в свойство count, которое он получает от своего хоста. Вот метод render() компонента ClickCounter:

Компонент PopularBar отображает два компонента ClickCounter с большими пальцами вверх и вниз в виде emojis. Обратите внимание, что если prop "show" является ложью, то он отображает пустой div. Это будет важно позже, когда мы обсудим монтирование и размонтирование.

The first iteration of the Popular BarThe first iteration of the Popular BarThe first iteration of the Popular Bar

Монтирование

Компоненты React существуют, когда они отображаются родительским компонентом или корневым приложением. Но прежде чем компонент может быть отображен, его нужно сконструировать (только один раз) и установить в виртуальный DOM (каждый раз он добавляется в виртуальный DOM).

Порядок событий заключается в том, что сначала компонент сконструирован, затем вызывается метод componentWillMount(), компонент монтируется в виртуальный DOM, а затем вызывается componentDidMount(). Это дает вам множество возможностей для выполнения различных типов инициализации.

Конструктор

Конструктор для компонента будет вызываться один раз для каждого приложения (если вы обновите страницу в своем браузере, то это считается новым приложением). Вот конструктор компонента PopularBar. Он не делает ничего, кроме вызова super(), который обязателен, и логирования в консоль.

Конструктор ClickCounter инициализирует стейт clickCount равным нулю:

Это прекрасный пример инициализации, которая должна выполняться один раз для каждого приложения. Если компонент ClickCounter монтируется несколько раз, он должен сохранять кол-во кликов.

ComponentWillMount

Метод componentWillMount() вызывается перед монтированием компонента, поэтому компонента еще нет. В общем, на этом этапе не так уж многое можно сделать, если у вас нет специальной инициализации, которая происходит каждый раз, когда компонент монтируется, но даже это может подождать до метода componentDidMount().

Вот реализация методов для PopularBar и ClickCounter:

Вы можете вызвать this.setState() здесь, если хотите. Очевидно, что props недоступен.

ComponentDidMount

Здесь компонент уже смонтирован, и вы можете выполнять любую работу, требующую доступа к компоненту в контексте виртуального DOM. Вот реализация методов для PopularBar и ClickCounter. Компонент уже существует, поэтому его свойства (props) могут быть доступны и отображены.

Чтобы подвести итог с монтированием, давайте посмотрим порядок событий в PopularBar и двух компонентах ClickCounter, которые он содержит. Для вашего удобства я показываю emoji для каждого ClickCounter, поэтому их можно отличить.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.