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