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

1. useEffect():
   Хук useEffect() — один из наиболее часто используемых методов жизненного цикла в функциональных компонентах. Он позволяет выполнять побочные эффекты, такие как получение данных или подписка на события, после визуализации компонента. Вот пример:

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Perform side effects here
    // This code will run after every render
    return () => {
      // Cleanup code (optional)
      // This code will run when the component unmounts
    };
  }, []); // Empty dependency array means it only runs once on mount
  return (
    // JSX for component rendering
  );
}

2. useState():
   Хук useState() не является традиционным методом жизненного цикла, но используется для управления состоянием функциональных компонентов. Он позволяет вам объявлять и обновлять переменные состояния внутри вашего компонента. Вот пример:

import React, { useState } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  // Rest of the component code
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. useMemo():
   Хук useMemo() используется для запоминания дорогостоящих вычислений и предотвращения ненужного повторного рендеринга компонентов. Он принимает функцию и массив зависимостей в качестве аргументов и возвращает запомненное значение. Вот пример:

import React, { useMemo } from 'react';
function MyComponent({ data }) {
  const filteredData = useMemo(() => {
    // Expensive computation here
    return data.filter(item => item.isActive);
  }, [data]);
  // Rest of the component code
  return (
    // JSX for component rendering
  );
}

4. useCallback():
   Хук useCallback() похож на useMemo(), но используется для запоминания функций. Он возвращает запомненную версию функции, которая меняется только в том случае, если изменились зависимости. Вот пример:

import React, { useCallback } from 'react';
function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    // Function logic here
    onClick();
  }, [onClick]);
  // Rest of the component code
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

В этой статье мы рассмотрели несколько методов жизненного цикла, доступных для функциональных компонентов в React. Мы рассмотрели перехватчики useEffect(), useState(), useMemo() и useCallback() и предоставили примеры кода для каждого метода. Понимая эти методы жизненного цикла, вы сможете эффективно управлять поведением своих функциональных компонентов на протяжении всего их жизненного цикла.