javascript - 为什么在 React 的#setState 中使用函数可以解决异步问题？

Question

来自docs ，它说“React 可以将多个 setState() 调用批处理到单个更新中以提高性能”，因此它建议使用函数而不是对象作为 setState 的参数。这如何解决问题？

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

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

Answer 1

当您将一个对象传递给 setState 时，React 将接受您传递的任何内容，创建一个事件来跟踪传递的内容，然后最终更新状态。正如文档所说，如果运行多个 setStates，React 可能会将它们批处理在一起，并且由于它将异步发生，也就是在未来的某个时刻，当您运行第一个示例时，它可能会使用 this.state.counter 这实际上是旧的并且会导致意想不到的副作用。

第二个选项被认为更安全，因为它很像一个 promise :当你传入一个函数时，React 只会在状态实际更新后运行这个函数。这确保您每次更新时都具有正确的 this.state.counter 变量，方法是使用它们作为回调参数提供的 prevState 变量。

我自己在使用第一种方法时没有遇到过问题，但我也没有尝试过一次充斥大量 setStates 调用，我确信这确实会出现。我看到这些犯规的人的主要方式是当他们在设置状态后立即尝试使用新状态时。

例如:

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

 // this will more then likely be the previous value 
 // as setState does not run right away, but asynchronously 
 this.useNewCounter(this.state.counter) 
}

在那个例子中，人们可能期望当 useNewCounter 被调用时它会使用最新的状态，但它不会，引用仍然指向以前的值，直到 react 更新状态这将在调用此方法后的某个时间点。