Есть ли стадии жизненного цикла в функциональном компоненте?

Жизненный цикл функциональных компонентов в React

Да, функциональные компоненты имеют стадии жизненного цикла, но они реализуются иначе, чем в компонентах класса. Вместо методов componentDidMount, componentDidUpdate и componentWillUnmount, в функциональных компонентах используются хуки, прежде всего useEffect.

Стадии жизненного цикла функциональных компонентов

Для функциональных компонентов можно выделить три ключевые стадии:

1. Монтирование (Mounting)

Эта стадия происходит при первом рендере компонента. Используется для инициализации данных и подписки на события:

useEffect(() => {
  console.log('Компонент смонтирован');
  const subscription = subscribe();
  
  return () => {
    subscription.unsubscribe();
  };
}, []);

2. Обновление (Updating)

Эта стадия происходит при каждом изменении состояния или props. Можно отслеживать конкретные зависимости:

useEffect(() => {
  console.log('Props изменились');
  fetchData(userId);
}, [userId]);

3. Размонтирование (Unmounting)

Эта стадия происходит перед удалением компонента из DOM. Используется для очистки ресурсов:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Выполнено');
  }, 5000);
  
  return () => {
    clearTimeout(timer);
  };
}, []);

Полный пример

import { useEffect, useState } from 'react';

export function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
      
    return () => {
      console.log('Очистка ресурсов');
    };
  }, [userId]);

  return <div>{user?.name}</div>;
}

Ключевые отличия от классовых компонентов

• useEffect объединяет componentDidMount, componentDidUpdate и componentWillUnmount
• Массив зависимостей контролирует, когда запускается эффект
• Множественные useEffect разделяют логику по смыслу
• Функция очистки (return statement) заменяет componentWillUnmount

Дополнительные хуки жизненного цикла

• useLayoutEffect — синхронный эффект перед покраской DOM
• useMemo — кеширование вычисленных значений
• useCallback — кеширование функций
• useRef — хранение значений, не вызывающих рендер

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