> Как работает жизненный цикл React-компонентов (React)

Жизненный цикл React-компонентов - это последовательность этапов, которые проходит компонент от момента создания до удаления из DOM. В классовых компонентах он явно управляется методами, а в функциональных через хуки, такие как useEffect.

Основные фазы:

1. Монтирование (Mounting) - компонент вставляется в DOM. В классовых компонентах используются constructor, static getDerivedStateFromProps, render и componentDidMount. В функциональных - useEffect с пустым массивом зависимостей ([]) для выполнения кода после первого рендера.

2. Обновление (Updating) - происходит при изменении props или state. Классовые методы: shouldComponentUpdate, render, componentDidUpdate. В функциональных - useEffect с указанием зависимостей, которые отслеживают изменения.

3. Размонтирование (Unmounting) - компонент удаляется из DOM. В классах - componentWillUnmount, в функциональных - функция очистки внутри useEffect, возвращаемая из колбэка.

Пример на функциональном компоненте:

JSX
import { useEffect, useState } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(interval); // очистка при размонтировании
  }, []); // пустой массив - только при монтировании

  useEffect(() => {
    console.log('Count обновился:', count);
  }, [count]); // срабатывает при изменении count

  return <div>{count}</div>;
}

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