如果多个setState调用是批处理的，那么prevState如何在状态不是的情况下保持更新的值

Question

新的react js。

最近，已经浏览了以下案例的博客

情况1:

state = {
count :1 
}
L1: this.setState({count:this.state.count +1});
L2: this.setState({count:this.state.count +1});
L3: ..Multiple Times..
Value of count is 2

情况2:

state = {
count :1 
}
L4: this.setState(prevState => ({count:prevState.count+1})); 
L5: this.setState(prevState => ({count:prevState.count+1}));
L6: ..Multiple Times..
Value of count is > 3

根据文档，多次调用setState将排队等待批更新(表达式也在那里(。

因此，根据我的理解，prevState只不过是当前状态的prevState。

这让我思考，

Q1. If the state is not holding the updated value (case 1), then how
the prevState (case 2) will hold the updated value?

有人能澄清一下吗？

Answer 1

当您调用setState时，在循环完成之前不会更新状态。因此，一定要在代码末尾调用setState。

Answer 2

传递给setState的函数不会接收到prevState，因为它是批处理时的前一个状态，而是保证它是最新版本的状态。

因此，对于第一个示例，它在渲染时的状态上加1，所以无论怎样，运行该代码都只会在count的初始值上加1。

第二个例子显示了将一个函数传递给set state，因此set state的每次调用都会作用于最近的状态，因此它将基于前一行迭代添加。

我做了一个演示：https://codesandbox.io/s/floral-haze-l1efo

Answer 3

函数参数中的表达式在调用函数之前进行求值，并且setState是异步的(它不会立即修改状态，而是在渲染之后(。

因此，情况1类似于：

this.setState({count: 2})
this.setState({count: 2})

然而，在函数形式中，对于setState的每个调用，prevState参数都是新计算的。

另请参阅在更复杂的情况下不立即反映更改的useState集方法。