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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Альфа-банк, ООО Премиум ИТ Солюшен, VK, Aston, Домклик, Swetec, EPAM, Сбер, Исходный Код, SmartWay

Стек: React

> Пример ответа

Основное различие между функциональными и классовыми компонентами в React - это способ управления состоянием и жизненным циклом. Классовые компоненты используют this.state и методы жизненного цикла (componentDidMount, componentDidUpdate, componentWillUnmount), а также требуют привязки this к методам. Функциональные компоненты - это чистые функции, которые до React 16.8 были stateless (без состояния), но с появлением хуков (useState, useEffect) они получили полный доступ к состоянию и побочным эффектам.

Ключевые отличия:

Синтаксис: классовые - ES6 классы с render(), функциональные - обычные функции, возвращающие JSX.
Состояние: в классах - this.state + this.setState(), в функциях - хук useState.
Жизненный цикл: в классах - методы (componentDidMount и т.д.), в функциях - хук useEffect (объединяет несколько методов).
Производительность: функциональные компоненты легче, меньше кода, и компилятор лучше их оптимизирует (например, tree-shaking).
Сложность: классы требуют понимания this, бойлерплейта (конструктор, bind), функциональные - проще и предсказуемее.

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