Асинхронная природа this.setState в React

Question

Допустим, у меня есть два звонка:

 this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
 }));

 this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment + 1
 }));

Поскольку setState является асинхронным, как гарантируется, что первый вызов к нему будет выполнен первым?

Answer 1

Из реактивной документации setState () говорится, что

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

Object.assign(
  previousState,
  {counter: previousState.counter + props.increment},
  {counter: previousState.counter + props.increment + 1},
  ...
)

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

this.setState((state) => {
  return {counter: state.counter + 1};
});