React state - это локальное состояние компонента React, которое, в отличие от его props, является частным и полностью контролируется самим компонентом.

Начальный state компонента определяется в его конструкторе - и только в конструкторе - следующим образом:

export class WeatherMan extends React.Component {
  
  constructor(props) {
    super(props)  // Class components should always call the base
                     constructor with props.
    this.state = {
      city: "",   // 
      weather: "",
    }
  }
}

state компонента - это объект, который может включать одну или несколько переменных. Каждая из этих переменных может быть инициализирована как пустой фрагмент данных (пустая строка или пустой массив и т. Д.)

Компоненты React имеют метод setState() для изменения своего состояния:

registerCity() {
  this.setState({ 
    city: "London",
    weather: "cloudy",
  })
}

Когда вызывается setState(), React знает, что состояние изменилось, и снова вызывает метод render(), чтобы узнать, что должно быть на экране:

render() {
  return <p>The weather in {this.state.city} today is {this.state.weather}</p>
}
==> The weather in London today is cloudy

Как правильно использовать состояние

  1. Компоненты state нельзя изменять напрямую. Этот:
this.state.city = "Rome"

не будет работать, поскольку компонент не будет повторно отрисован React. Единственный способ изменить state - это, как указано выше, с помощью метода setState().

2. Поскольку this.props и this.state могут обновляться асинхронно, не следует полагаться на их значения при вычислении следующего состояния. Избегайте чего-то вроде этого:

this.setState({
  counter: this.state.counter + this.props.increment,
});

, так как счетчик может не обновиться.

3. Когда вы вызываете setState(), React объединяет предоставленный вами объект в текущее состояние. Но когда вы вызываете setState() для изменения переменной в state, полностью заменяется только значение этой переменной, а не другие переменные, содержащиеся в state.

4. state часто называют локальным или инкапсулированным: он недоступен для какого-либо компонента, кроме того, который владеет и устанавливает его.

Компонент может передать свое состояние в качестве свойств своим дочерним компонентам:

<City weather={this.state.weather} />

Компонент City получит weather как такую ​​опору:

showWeather(props) {
  return <p>The weather here today is {props.weather}</p>
}

не заботясь о том, идет ли он от WeatherMan state или props, или он был набран вручную.

Это обычно называется «нисходящим или однонаправленным» потоком данных: любое состояние всегда принадлежит определенному компоненту, и любые данные или пользовательский интерфейс, полученные из этого состояния может воздействовать только на компоненты «ниже» их в дереве.