Javascript Reactjs setState previous state是第一个参数，props作为第二个参数

我在这篇官方文章中读到以下几句话：

this.props

和

this.state

可以异步更新，您不应该依赖它们的值来计算下一个状态

任何人都可以通过给出一个例子向我解释下面的代码试图实现什么

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

---

他们说你应该这样做，而不是下面的例子

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

如果您这样访问，他们无法保证状态将具有正确的值，因为setState（）将异步发生，可能会发生其他更新并更改值。如果要根据前一个状态计算状态，则必须确保具有最后一个也是最新的值，因此他们让setState（）接受一个使用prevState和props调用的函数，这样您就可以获得更新状态的正确值，就像下面的例子

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

---

为了补充布鲁诺的答案，上面正确的函数称为纯函数。React在一个叫做React的东西上非常重要，这意味着如果可能的话，每个声明的值都不应该从其原始声明更改。该函数中的变量在传入之前不是实际的道具和状态，这意味着在javascript函数堆栈（对同步和异步调用进行排队的线程）上，值和对属性的引用将以不同的方式存储，从而不确定“错误”中的值是什么案例。

React可以将多个setState（）调用批处理到一个更新中以提高性能。

由于

this.props

和

this.state

可能会异步更新，因此不应依赖它们的值来计算下一个状态

和来自：

setState（）

将更改排入组件状态队列并告知React 此组件及其子组件需要使用 更新状态

将

setState（）

视为一个请求，而不是一个即时命令 以更新组件。为了获得更好的感知性能，可能会做出反应 延迟它，然后在一次过程中更新几个组件。反应 不保证立即应用状态更改

以身作则理解

这个概念可能很难理解，特别是为什么它会导致问题，所以我写了一个例子来说明发生了错误：

/* Imagine props and states is the same as this.props and this.state */
var state = { counter: 0 } ; var props = { } ;

/* Our fake implementation of react setState */
var setStatesToRun = []
function setState(myFunction) { setStatesToRun.push(myFunction); }

/* Our fake implementation of react batch update */
function batchRunStateUpdates() {
  propsLocal = props
  stateLocal = state

  f1 = setStatesToRun.pop()
  newState = f1(stateLocal, propsLocal)  // Will run increment by 3
  console.log(newState) // newState: { counter: 3 }
  console.log(state) // state: { counter: 0 }

  f2 = setStatesToRun.pop()
  newState = f2(newState, propsLocal) // Will run increment by 2
  console.log(newState) // newState: { counter: 2 }
  console.log(state) // state: { counter: 0 }

  // ... get the next setState function loop

  console.log("Will update global state")
  state = newState  
  console.log(state) // state: { counter: 2 } // WRONG!
}

console.log(setStatesToRun) // []

// Right
setState((prevState, props) => { counter: prevState.counter + 3 });

// WRONG, using state (this.state)
setState((prevState, props) => { counter: state.counter + 2 });

console.log(setStatesToRun) // [func, func]

batchRunStateUpdates();

在顶部，我们有一些React方法的假版本。这些都过于简化了，但有助于解释发生了什么

然后，我们使用setState，方法与我们在React中使用的方法相同。一种用法是正确的，另一种用法是错误的

注意，最后的全局状态应该是

state:{counter:5}

，但是由于我们不尊重React的建议，我们得到了

state:{counter:2}

---

您可以在thanx中使用此代码。函数是无状态的，类不在Reactjs中？