React: В чем разница между функциональными и классовыми компонентами? Почему функциональные компоненты с хуками стали стандартом?
В экосистеме React существуют два способа создания компонентов: классовые (Class Components) и функциональные (Functional Components). Понимание их различий помогает писать более чистый, поддерживаемый и современный код.
## Классовые компоненты
Классовые компоненты появились в ранних версиях React и основаны на синтаксисе классов ES6. Они наследуются от `React.Component` и обязательно содержат метод `render()`, возвращающий JSX. Ключевые особенности:
— **Состояние** хранится в `this.state` и обновляется через `this.setState()`.
— **Жизненный цикл** управляется методами: `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` и другими.
— Доступ к пропсам и состоянию осуществляется через `this`, что нередко вызывало ошибки из-за потери контекста.
— Код становился громоздким: логика одной фичи размазывалась по нескольким методам жизненного цикла.
— Переиспользование логики между компонентами требовало паттернов Higher-Order Components (HOC) или Render Props, которые усложняли дерево компонентов.
## Функциональные компоненты
Изначально функциональные компоненты были «тупыми» — они принимали пропсы и возвращали JSX, не имея ни состояния, ни доступа к жизненному циклу. Всё изменилось с выходом React 16.8 в 2019 году, когда появились **хуки**.
Хуки — это функции, позволяющие «подключаться» к возможностям React без написания классов:
— `useState` — управление локальным состоянием.
— `useEffect` — работа с побочными эффектами и жизненным циклом.
— `useContext` — доступ к контексту без обёрток.
— `useRef`, `useMemo`, `useCallback` и другие — оптимизация и работа с DOM.
## Почему функциональные компоненты с хуками стали стандартом?
1. **Меньше кода, выше читаемость.** Функциональный компонент с хуками значительно короче аналогичного классового.
2. **Нет проблем с `this`.** Функции не имеют собственного контекста, что устраняет целый класс ошибок.
3. **Лучшее переиспользование логики.** Кастомные хуки позволяют выносить и шарить логику между компонентами без усложнения дерева.
4. **Логика сгруппирована по смыслу.** В отличие от классов, где логика одной фичи разбросана по разным методам жизненного цикла, хуки позволяют держать связанный код вместе.
5. **Поддержка команды React.** Официальная документация и новые API (например, Concurrent Mode, Server Components) ориентированы на функциональный подход.
6. **Лучшая совместимость с TypeScript** и современными инструментами.
Классовые компоненты не удалены из React и продолжают работать, однако новые проекты и библиотеки пишутся исключительно на функциональных компонентах с хуками. Это де-факто стандарт современной React-разработки.