javascript - 什么是合并？

Question

我有以下方法:

increaseCount() {
  console.log(this);

  this.setState(prevState => ({       // X
    count: prevState.count + 1
  }));

  this.setState(function(prevState) {      // Y
    return { count: prevState.count + 1 };
  });

  this.setState({ count: this.state.count + 1 }, function() {   // Z
    return this.setState({ count: this.state.count + 1 });
  });
}

X 和 Y 一起使用时会将计数器增加 2。单独使用时 Z 会将计数器增加 2

为什么使用 X、Y 和 Z 时计数器不增加 4？另外，如果我将 block Z 放置在 X 和 Y 之上，它会按预期工作并增加 4。有人可以解释一下发生了什么吗？

Answer 1

您可以将 setState 视为异步调用。当您使用this.setState((prevState) => {})时您向它传递一个函数，该函数将根据其先前的值更新状态。另一方面，当您像 this.setState({count:this.state.count+1}) 这样使用它时您正在将实际值传递给对象。

也就是说，setState 操作将按照调用顺序更新状态，但在实际调用时不会等待前一个调用完成。因此，在您的情况下，X 和 Y 将根据先前的值更新状态(因此 0 -> 1，然后 1->2)，但是 Z 已使用值 {count: this.sate.count + 1} 进行调用。这可能是 {count: 0 + 1}在它被调用的时候。 Z 中的第二个参数是第一次更新完成后调用的回调。这边this.state.count调用时已经是 1，结果又是 2。

如果将 Z 放在顶部，它将递增 count如上所述，设置为 2，那么接下来的两次 setState 调用将根据实际的 prevState 增加它。在他们被召唤的时候。

插图:

In the js code:
InitialState: count = 0;
X called -> (count: prevState + 1);
Y called -> (count: prevState + 1);
Z called -> (count: 0 + 1); 

Meanwhile asynchronously:
InitialState: count = 0
X -> prevState=0, count = 0 + 1;
Y -> prevState=1, count = 1 + 1;
Z -> count = 1; then called again for (count: this.state.count + 1) which is now (count: 1 + 1)