Как работают state в React?

257
18 октября 2017, 08:13

Есть пример кода:

class Conditioner extends React.Component {
    constructor(props) {
      super(props);
      this.state = {temperature: 0};
      // Привязка необходима, чтобы сделать this доступным в коллбэке
      this.onIncrease = this.onIncrease.bind(this);
      this.onDecrease = this.onDecrease.bind(this);
    }
    onIncrease(){
      this.setState(prevState => ({
        temperature: prevState.temperature + 1
      }))
    }
    onDecrease(){
      this.setState(prevState => ({
        temperature: prevState.temperature - 1
      }))
    }
    render() {
      return (<p>
          <h2>Текущая температура: {this.state.temperature}</h2>
          <button onClick={this.onDecrease}>-</button>
          <button onClick={this.onIncrease}>+</button>
        </p>);
    }
  }

В методах onIncrease и onDecrease есть место:

  this.setState(prevState => ({
    temperature: prevState.temperature + 1
  }))

Понятно что prevState это параметр который мы посылаем в функцию onClick={this.onDecrease}, но где вызов этой функции с данным параметром? И каким образом вместо this.state.temperature, у нас получилось prevState.temperature? Где и как определена связь между this.state и prevState? Они как будто синонимы... Но как так получилось?

Объясните пожалуйста как это работает. Спасибо.

Answer 1

prevState = this.state в момент вызова this.setState.

Разберем по шагах:

  1. По клику на <button> срабатывает переданная в onClick функция this.onIncrease.

  2. После вызова this.onIncrease вызывает метод this.setState.

У setState может быть 2 аргумента:

this.setState((prevState, props) => ({ temp: prevState.temp + 1 }), callback),

где (prevState, props) => ({ temp: prevState.temp + 1 }) - первый аргумент - функция, которая возвращает новое значения this.state, а callback - второй аргумент - функция, которая срабатывает после завершения обновления this.state (не сразу).

Ми получаем (prevState, props) от React автоматически в момент вызова setState.

Где и как определена связь между this.state и prevState?

Связь между ними обеспечивает сам React без нашего вмешательства.

Подробней можно прочитать в документации

READ ALSO
Как присвоить класс к блоку при загрузке страницы?

Как присвоить класс к блоку при загрузке страницы?

Вкратце - с помощью чего можно задать присвоение класса блоку еще при загрузке страницы на нативном js?

258
Проблема с параллаксом

Проблема с параллаксом

Есть такая разметка (pug):

228
Nasdaq.com исторические котировки через VBA POST

Nasdaq.com исторические котировки через VBA POST

Привет всем! Стоит задача собрать исторические котировки по бумаге с сайта nasdaqcom для дальнейшей их обработки и вывода отчета в MS Excel

222
Как поменять все четные ключи массива на нечетные и наоборот?

Как поменять все четные ключи массива на нечетные и наоборот?

У меня есть массив [1, 2, 3, 4], а нужно получить [2, 1, 4, 3]Может в php есть готовое решение? А если нет, то можно пожалуйста пример такой функции

189