Обзор наиболее важных методов жизненного цикла

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

Итак, каков жизненный цикл React?

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

Давайте сначала рассмотрим некоторые из основных терминов. Объектная модель документа, называемая DOM, является основным интерфейсом, который представляет документы HTML и XML в виде структурированного дерева. Эти документы состоят из узлов и объектов; именно эти объекты представляют собой компоненты, возвращаемые в DOM как элементы React.

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

Свойства компонента, более известные как props, передаются компоненту от его родителя. Такое присвоение свойств компоненту всегда однонаправлено (данные передаются в одном направлении, от родителя к потомку). Однако это не ограничивает способность родительского компонента получать данные от своего дочернего компонента.

Теперь, переходя к жизненному циклу, каждый этап означает следующее:

  • Монтирование относится к элементам, добавляемым в дерево DOM.
  • Обновление означает применение изменений к таким элементам в дереве DOM с помощью состояний или свойств.
  • Размонтирование - это когда необходимо удалить элементы в дереве DOM.

Монтажные компоненты

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

  • конструктор()
  • getDerivedStateFromProps ()
  • оказывать()
  • componentDidMount ()

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

Затем у нас есть статический метод под названием getDerivedStateFromProps, который вызывается непосредственно перед рендерингом. Единственная цель этого метода - сравнить новые свойства с предыдущим состоянием, указанным в параметрах метода (props, state), и либо вернуть объект (то есть обновить) или ноль (без изменений). Оба значения параметра при сравнении должны отличаться для обновления.

render - самый важный метод для компонентов класса. Каждый компонент должен иметь этот чистый метод (без изменения состояния компонента). Этот метод помещает все выходные данные выражения JSX (элементы React) в дерево DOM.

После того, как компонент монтируется с помощью рендеринга, следует очень популярный метод componentDidMount. Идеальное место для начала вызовов функций или вызовов API для извлечения данных. В основном думайте об этом как о «какие действия (если они есть) я хочу, чтобы этот компонент выполнял сразу после монтирования в DOM».

Обновление компонентов

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

  • getDerivedStateFromProps ()
  • shouldComponentUpdate ()
  • оказывать()
  • getSnapshotBeforeUpdate ()
  • componentDidUpdate ()

И getDerivedStateFromProps, и render оказывают такое же влияние на этом этапе, как и на этапе монтирования. Это связано с тем, что компонент повторно запустит оба метода для обновления.

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

Как следует из названия, getSnapshotBeforeUpdate - отличный инструмент для сбора полезной информации в модели DOM до ее возможного обновления. Скажем, вы хотите узнать позицию прокрутки для div в текущей модели DOM, вы можете получить позицию прямо перед обновлением.

Последним методом на этом этапе жизненного цикла является componentDidUpdate. Как следует из названия, этот метод будет вызываться сразу после обновления компонента с помощью рендеринга. Подобно componentDidMount, вы можете использовать этот метод для выполнения необходимых вызовов функций или сетевых запросов API после обновления дерева DOM.

Отключение компонентов

Самая последняя фаза жизненного цикла компонента имеет только один метод, а именно componentWillUnmount. Последний метод, вызываемый непосредственно перед удалением компонента из дерева DOM. Это идеальное место для выполнения звонков по уборке в последнюю минуту; если вы забудете удалить все ненужное, это может вызвать такие проблемы, как утечка памяти.

Обработка ошибок компонентов

Мы живем в мире, где все идет не так, как планировалось, и то же самое можно сказать о компонентах React. Чтобы бороться с любыми беспрецедентными проблемами, вы можете вызвать getDerivedStateFromError или componentDidCatch в любом методе жизненного цикла компонента или в конструкторе дочернего компонента. Эти методы действительно могут помочь вам справиться с такими проблемами, как ошибки отрисовки компонентов.

Примечание об устаревших методах

Версии до V.17 состояли из некоторых методов жизненного цикла, которые теперь считаются небезопасными. Эти методы

  • componentWillMount ()
  • componentWillReceiveProps ()
  • componentWillUpdate ()

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

Резюме

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

Наиболее часто используемые методы жизненного цикла включают соответственно constructor, render, componentDidMount, componentDidUpdate и componentWillUnmount. Несколько других методов нужны только в необычных сценариях, поэтому вы не будете часто их использовать.

Если вы беспокоитесь, что можете столкнуться с ошибками, getDerivedStateFromError и componentDidCatch весьма полезны.