Расскажи про жизненный цикл React-компонентов (классовых и функциональных).

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

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

Основные методы жизненного цикла:

• constructor(props) — инициализация состояния и привязка методов.
• componentDidMount() — вызывается после монтирования компонента в DOM, здесь обычно делают запросы к API.
• shouldComponentUpdate(nextProps, nextState) — позволяет оптимизировать перерисовку, возвращая true/false.
• componentDidUpdate(prevProps, prevState) — вызывается после обновления компонента.
• componentWillUnmount() — очистка ресурсов перед удалением компонента.

Пример:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Компонент смонтирован');
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log('Счётчик обновился');
    }
  }

  componentWillUnmount() {
    console.log('Компонент будет удалён');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Функциональные компоненты

С приходом хуков жизненный цикл реализуется через useEffect:

• useEffect(() => { ... }, []) — аналог componentDidMount.
• useEffect(() => { ... }) — вызывается после каждого рендера.
• useEffect(() => { ... }, [deps]) — вызывается при изменении зависимостей.
• Возвращаемая функция из useEffect — аналог componentWillUnmount.

Пример:

function MyComponent() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Компонент смонтирован');
    return () => {
      console.log('Компонент будет удалён');
    };
  }, []);

  React.useEffect(() => {
    console.log('Счётчик обновился:', count);
  }, [count]);

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