> В чем разница функциональных и классовых компонентов в React? (React)

Короткий ответ

Функциональные компоненты - это чистые функции, принимающие props и возвращающие JSX, а классовые - экземпляры класса с методами жизненного цикла и состоянием через this.state. С появлением хуков в React 16.8 функциональные компоненты полностью заменили классовые: они проще, не требуют привязки контекста и имеют доступ к состоянию и эффектам через useState и useEffect. Классовые компоненты считаются устаревшими в новых проектах.

Подробное объяснение

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

• Синтаксис и структура: функциональные - это обычные функции, классовые - классы с методом render(). Функциональные не имеют this, что устраняет путаницу с контекстом.
• Состояние и жизненный цикл: в классах используются this.state, this.setState(), componentDidMount, componentDidUpdate, componentWillUnmount. В функциях - хуки useState и useEffect, которые объединяют логику жизненного цикла в одном месте.
• Производительность: функциональные компоненты легче, так как не создают экземпляр класса. React оптимизирует их лучше, особенно с React.memo для предотвращения лишних ререндеров.
• Читаемость и тестирование: функциональные компоненты короче, их логика изолирована в хуках, что упрощает тестирование и повторное использование кода.
• Обработка побочных эффектов: в классах эффекты размазаны по разным методам, в функциях - собраны в useEffect с явным указанием зависимостей.

Ключевой trade-off: классы давали явный контроль над жизненным циклом, но функциональные компоненты с хуками предоставляют более декларативный и композируемый подход, снижая вероятность ошибок с this и дублирования кода.

На практике

В современных React-приложениях (начиная с 2020 года) функциональные компоненты - стандарт. Классовые компоненты встречаются только в legacy-коде или в редких случаях, когда требуется точный контроль над shouldComponentUpdate без React.memo. При миграции старого кода классовые компоненты постепенно заменяют на функциональные с хуками.

На практике важно:

• Использовать useEffect для подписок и очисток, а не componentDidMount/componentWillUnmount.
• Для оптимизации ререндеров применять React.memo вместо PureComponent.
• Избегать this в функциональных компонентах - все данные передаются через замыкания.

Пример кода

JSX
// Функциональный компонент
import { useState, useEffect } from 'react';

const Timer = ({ initial }) => {
  const [count, setCount] = useState(initial);

  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);

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

// Классовый компонент (устаревший)
class TimerClass extends React.Component {
  state = { count: this.props.initial };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prev => ({ count: prev.count + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

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

Как отвечать на собеседовании

На уровне senior стоит подчеркнуть, что разница не только в синтаксисе, но и в парадигме: функциональные компоненты с хуками позволяют писать более декларативный код, избегая проблем с this и дублированием логики в методах жизненного цикла. Упомяните, что классовые компоненты всё ещё могут быть оправданы в legacy-проектах, но для нового кода они не рекомендуются.

Хорошо добавить про React.memo как аналог shouldComponentUpdate и про то, как хуки решают проблему cross-cutting concerns (например, через кастомные хуки). Избегайте простого перечисления различий - покажите понимание мотивации изменений в React.

Что проверяет интервьюер

Интервьюер оценивает:

• Понимание эволюции React и причин перехода на хуки.
• Знание конкретных механизмов: как работают useEffect, useState, React.memo.
• Умение объяснить trade-off между подходами (например, сложность тестирования классов vs. замыкания в хуках).
• Практический опыт: как вы решали проблемы с this или дублированием кода в классах.

Типичные ошибки

• Утверждение, что функциональные компоненты не могут иметь состояние (устарело с хуками).
• Путаница между useEffect и componentDidMount - забывают про зависимости и cleanup.
• Игнорирование React.memo при сравнении производительности классов и функций.
• Использование this внутри функционального компонента (например, this.props).
• Непонимание, что классовые компоненты всё ещё работают в React 18, но не рекомендуются.