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？此外，如果我将块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}可能是{{ 1}}在它被召唤时。 Z中的第二个参数是第一次更新完成后调用的回调。这种方式{count: 0 + 1}在调用时已经为1，再次产生2。

如果你把Z放在顶部，它将如上所述将this.state.count增加到2，然后接下来的两个setState调用将根据它们被调用时的实际count来增加它。

插图：

prevState

Answer 2

因为setState是异步的。假设你的所有三个都是逐行运行的，那么你的初始计数为0。 this.state.count值块Z得到的实际上是0而不是2.

什么是合并？

2 个答案: