Методы жизненного цикла React и хуки

React Hooks — очень полезная функция, которая недавно была запущена в версии React 16.8. При создании приложения React разработчик может использовать либо хуки в функциональном компоненте, либо методы жизненного цикла в компонентах на основе классов. Которые также полезны, предоставляя вам доступ к методам жизненного цикла, таким как componentDidMount, componentDidUpdate, componentWillUnmount и т. д. Эти методы «жизненного цикла» делают именно то, что они контролируют жизненный цикл компонента, например, когда ваш компонент «монтируется», это начало вашего жизненный цикл компонента. Затем, если вы должны были внести изменения в состояние компонентов и вам нужно обновить DOM (объектную модель документа), тогда будет использоваться метод «обновления». Наконец, когда компонент удаляется из DOM, метод componentWillUnmount будет вызываться последним, поскольку он работает как очистка для удаления элементов DOM. Теперь, когда мы знаем о методах жизненного цикла React, объясняющих, почему хуки важны, должно быть легче следовать.

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

Код компонента на основе классов:

import React from “react”;
 
class Component extends React.component{
 componentDidMount(){
  console.log (“Before the component is added to the DOM”);
 }
 render() {
  return <h1> Pledge Davis </h1>;
  }
};

Код функционального компонента:

import React, { useEffect } from “react”;
Const Component = () => {
 useEffect(() => {
  console.log(“Before the component is added to the DOM”);
 } , []);
 return <h1>Pledge Davis</h1>;
};

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