Расскажите про жизненный цикл React-компонента: основные этапы mount, render, unmount.

Жизненный цикл React-компонента включает несколько основных этапов:

1. Mount (монтирование) — создание компонента и вставка его в DOM.

   • В классовых компонентах вызывается конструктор, затем render(), после чего срабатывает componentDidMount().
   • В функциональных компонентах с хуками — сначала вызывается функция компонента, затем эффект useEffect с пустым массивом зависимостей.

2. Render (рендеринг) — процесс генерации виртуального DOM на основе текущего состояния и пропсов.

   • Вызывается метод render() в классовых компонентах.
   • В функциональных компонентах — вызов функции компонента.
   • Рендер может происходить при изменении состояния (setState) или пропсов.

3. Update (обновление) — происходит при изменении состояния или пропсов.

   • В классовых компонентах вызываются методы shouldComponentUpdate(), componentDidUpdate().
   • В функциональных компонентах — повторный вызов функции компонента и хуков.

4. Unmount (размонтирование) — удаление компонента из DOM.

   • В классовых компонентах вызывается componentWillUnmount() для очистки ресурсов.
   • В функциональных компонентах — функция очистки в useEffect.

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

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // componentDidMount
    console.log('Mounted');

    return () => {
      // componentWillUnmount
      console.log('Unmounted');
    };
  }, []);

  return <div>Hello, React!</div>;
}

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