Крючки жизненного цикла
После того, как в React 16.8 были введены хуки React, хуки жизненного цикла, которые были доступны только в компонентах на основе классов, теперь также доступны в функциональных компонентах с помощью хука useEffect.
Хотя useEffect дает нам аналогичный контроль над жизненным циклом компонента, хуки жизненного цикла доступны только в компонентах на основе классов.
Ниже перечислены хуки жизненного цикла, вызываемые при создании компонента на основе классов:
Жизненный цикл создания компонента на основе классов
1. Конструктор
Когда компонент должен быть создан, первое, что запускается, - это не ловушка жизненного цикла, а конструктор компонента. Конструктор является функцией класса ES6 по умолчанию и автоматически добавляется в класс, если мы его не укажем. Конструктор можно использовать для установки начального состояния компонента, инициализации переменных и связывания функций. Поскольку конструктор важен в классе, он вызывается перед перехватчиками жизненного цикла при создании компонента на основе класса.
2. getDerivedStateFromProps
После конструктора запускается getDerivedStateFromProps. Он вызывается прямо перед функцией рендеринга. getDerivedStateFromProps вызывается во время первоначального монтирования компонента и при последующих обновлениях.
Это редко используемый крючок жизненного цикла, когда состояние нашего компонента должно быть получено из изменений, сделанных в props с течением времени. Причина, по которой этот крючок жизненного цикла не используется часто, связана с доступными более простыми альтернативами. Эти альтернативы делают наш код менее многословным и поэтому используются вместо этой ловушки. При этом этот крючок не совсем бесполезен.
Одним из удобных вариантов использования было бы использование его для реализации <Transition> компонента, который сравнивает свои предыдущие и следующие дочерние элементы, чтобы определить, какие из них следует анимировать. Вы можете узнать больше об этом крючке жизненного цикла на странице React docs.
3. render ()
После вызова конструктора компонента и ловушки жизненного цикла getDerivedStateFromProps вызывается функция render. Он возвращает весь наш JSX.
Функция render должна оставаться чистой и использоваться только для подготовки данных, которые нам понадобятся для визуализации JSX. Здесь не следует использовать любые HTTP-запросы или тайм-ауты, которые могут заблокировать процесс рендеринга.
4. componentDidMount
После завершения рендеринга JSX из функции render вызывается componentDidMount. Здесь можно запускать асинхронные задачи, такие как HTTP-запросы. Например, если вам нужно получить данные с удаленной конечной точки, это хорошее место для этого.
Здесь выполняется инициализация, требующая элементов DOM.
Подведение итогов
В жизненном цикле компонента React на основе классов задействовано несколько ловушек. Перехваты, упомянутые в этой статье, используются во время создания компонента. Когда компонент обновляется, вызывается еще несколько хуков. Мы рассмотрим их в следующей статье.
Изначально опубликовано в моем блоге.
