В чем разница между классовыми компонентами и компонентами на React Hooks

Классовые компоненты используют ES6-классы и методы жизненного цикла (`componentDidMount`, `componentDidUpdate` и т.д.), а функциональные с хуками (`useState`, `useEffect`) работают через функции и хуки. **Основные отличия:** 1. **Синтаксис** – классы vs функции. 2. **Состояние** – в классах через `this.state`, в хуках через `useState`. 3. **Жизненный цикл** – хуки заменяют методы (`useEffect` вместо `componentDidMount` и др.). 4. **Переиспользование логики** – хуки позволяют выносить логику в кастомные хуки, в классах – HOC или рендер-пропсы. **Пример:** ```jsx // Классовый компонент class Counter extends React.Component { state = { count: 0 }; increment = () => this.setState({ count: this.state.count + 1 }); render() { return {this.state.count}; } } // Функциональный с хуками function Counter() { const [count, setCount] = useState(0); const increment = () => setCount(count + 1); return {count}; } ``` Хуки проще, компактнее и позволяют избежать "адского колбэка" (`this`).