Зачем нам нужно понимать методы жизненного цикла ReactJ?

Компоненты — это ядро ​​ReactJ. Когда вы создаете приложение на ReactJ, вам придется разделить пользовательский интерфейс на многократно используемые компоненты и думать о каждом из них отдельно.

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

Существует множество методов триггера для компонентов пользовательского интерфейса, и их можно вызывать на разных этапах и фазах жизненного цикла компонента.

Четыре этапа жизненного цикла компонента: Инициализация, подключение, обновление и размонтирование.

Очень важно знать, что этапы жизненного цикла компонента могут быть созданы только в компонентах с отслеживанием состояния или компонентах класса.

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

Позже я напишу сообщение в блоге, объясняющее различия и преимущества между компонентами класса (компонентами с отслеживанием состояния) и компонентами без сохранения состояния (функциональными компоненты).

So, why is understanding lifecycle methods so important?

Давайте представим, что вы создаете приложение на ReactJs, например приложение для видеопроигрывателя, такое как Vimeo, Twitch или Youtube.

Теперь ваш пользователь использует приложение проигрывателя на своем ноутбуке и решает найти забавное видео для просмотра, нашел видео, а затем выбрал его для просмотра.

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

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

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

Когда мы создаем приложение в ReactJs, мы можем прогнозировать различные типы действий пользователя, размещая некоторые хуки и триггеры.

Эти триггеры и хуки доступны с помощью методов жизненного цикла компонентов в Reactjs. Они помогут нам создать максимально эффективную часть программного обеспечения.

Чтобы правильно разместить хуки-методы в компонентах, нам нужно больше узнать о четырех этапах компонента ReactJs.

Компонент ReactJs проходит четыре следующих этапа:

  • Инициализация
  • Монтаж
  • Обновление
  • Размонтирование

вот небольшая диаграмма, чтобы продемонстрировать эти фазы.

Инициализация

На этом этапе компонент в ReactJs готовится настроить начальное состояние и реквизиты по умолчанию, если они есть.

Например:

Компонент установил состояние и реквизиты в конструкторе, которые можно изменить позже с помощью метода setState.

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

Монтаж

Теперь, когда вы подготовили основные потребности, задав состояние и реквизиты, компонент React готов к монтированию в DOM.

На этом этапе методы ловушек будут доступны до и после монтирования вашего компонента.

Вот методы, которые вы можете вызывать при создании компонента с отслеживанием состояния:

  • componentWillMount()

Этот метод выполняется перед рендерингом и прямо перед тем, как компонент собирается монтироваться в DOM.

Избегайте побочных эффектов этого метода, воздерживаясь от вызовов API.

Ты мне не веришь? Вот что говорится в документации ReactJs о componentWillMount().

«Избегайте добавления каких-либо побочных эффектов или подписок в этот метод. В таких случаях используйте вместо этого componentDidMount()».

https://reactjs.org/docs/react-component.html#componentwillmount

  • рендеринг()

Render — один из обязательных методов, которые вам нужны. Он смонтирует компонент в DOM браузера.

  • компонентDidMount()

Метод componentDidMount будет выполнен после монтирования компонента в DOM.

  • Это лучшее место для побочных эффектов, и вы должны делать вызовы API в методе componentDidMount.
  • Вот одна интересная вещь. Когда монтирование происходит в первый раз, ReactJs вызывает componentDidMount. However при каждом последующем повторном монтировании компонента, ReactJs вызывает хук жизненного цикла componentDidUpdate вместо componentDidMount.
  • componentDidUpdate() is invoked immediately after update occurs. This method is not called for the initial render.
  • Реагировать документы

Обновление

Этот этап начинается, когда компонент реагирования запускается в браузере и когда он получает новые обновления. Существует два способа обновления компонента: отправка новых реквизитов или обновление состояния.

  • componentWillReceiveProps()

Этот метод ловушки жизненного цикла будет выполняться при изменении props, вызванном компонентом parent.

  • долженОбновитьКомпонент()

Этот метод сообщает ReactJ, когда компонент получает следующие props и следующее состояние, а также когда они будут обновлены.

Как вы видите выше, этот метод на самом деле задает вопрос, should the component be updated?а затем возвращает falseилиtrue.

Если вы выберете false, обновление прекратится, вы фактически сэкономите производительность, потому что React не нужно проходить через все дерево компонентов.

С другой стороны, если вы выберете true, обновление продолжится, и следующим вызываемым методом будет componentWillUpdate() .

Кстати, метод shouldComponentUpdate() по умолчанию возвращает значение true.

  • компонентWillUpdate()

В этот момент предыдущий метод shouldComponentUpdate() вернул true, метод componentWillUpdate() выполнит некоторую подготовку к предстоящему рендер().

  • render() следующий шаг — визуализация компонента.
  • компонентDidUpdate()

Этот метод ловушки выполняется после того, как обновленный компонент был изменен в DOM. Он поддерживает те же реквизиты и состояние.

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

Размонтирование

На этом этапе компонент будет отключен от DOM.

  • componentWillUnmount()

Этот метод выполняет все необходимые очистки компонента. Например: очистка любых подписок, аннулирование таймеров, отмена сетевых запросов и т. д., созданных с помощью componentDidMount().

Я надеюсь, что эта запись в блоге поможет вам немного больше понять о методах жизненного цикла в ReactJs.

Чау!

Зизо :)

РЕСУРСЫ

Документация ReactJs — https://reactjs.org/docs/react-component.html