Компонент со состоянием — это компонент, поведение и результат которого зависят от его внутреннего состояния. Состояние представляет данные, которые могут меняться со временем и влияют на то, как компонент отображается и работает.
Раньше компоненты со состоянием реализовывали как классовые компоненты. Состояние инициализируется в конструкторе и управляется через жизненный цикл компонента:
class App extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
render() {
return <div>{this.state.count}</div>
}
}
Ключевые характеристики:
constructorthis.stateС появлением хуков ты теперь можешь использовать состояние в функциональных компонентах, без необходимости писать классовые компоненты:
import React, { useState } from 'react';
const App = (props) => {
const [count, setCount] = useState(0);
return <div>{count}</div>
}
useState заменяет управление состоянием через классыКомпоненты со состоянием управляют внутренним состоянием, которое влияет на их отображение. Раньше это было возможно только в классовых компонентах, но React Hooks позволяют функциональным компонентам тоже иметь состояние, делая их предпочтительным современным паттерном для написания компонентов со состоянием в приложениях React.
Stateful компоненты требуют использования синтаксиса класса, потому что только class компоненты могут управлять внутренним состоянием, которое изменяется со временем.
Новый — ещё не проверен сообществом
Вы