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

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