javascript - React setState() 保证

Question

在 setState 的文档中这样说:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

所以我理解您是否有一个像这样的事件处理程序:

handleClick() {
  this.stuff1();
  this.stuff2();
}

stuff1() {
  this.setState({...});
}

stuff2() {
  doSomethingWithState(this.state);
  this.setState({...});
}

那么在 stuff2 方法中，您可能看不到(或者这保证您不会..)看到 stuff1 中的状态更新。 React 提供了一种通过向 setState() 提供函数而不是对象来“安全”访问先前状态的方法。但想必您可以通过在处理事件时自行跟踪状态并在方法结束时调用 setState() 来解决此问题。因此，也许还有另一个原因可以选择向 setState() 提供函数。如果在调用 handleClick 方法之前可以对状态进行其他更改，该怎么办？

例如，如果调用handleClick()两次，那么我是否能保证在第二次调用handleClick()时看到第一次调用handleClick()时的状态变化？或者在调用我的事件处理程序之前是否有其他方式使状态变脏？

Answer 1

任何时候你有一个从前一个状态派生的状态，如果你不使用回调函数而不是传入对象，你可能会遇到它们不同步的问题。在你的最后一个例子中，只有使用该函数才能保证你。如果您依赖 this.state，您可能很容易遇到 handleClick 被调用一次的情况，状态转换会排队等待稍后解决，您有 handleClick 再次调用，第一个状态更改仍处于待处理状态并在队列中，因此当您调用 this.state 时，它将具有与第一个 handleClick 相同的可用状态 拥有这不是您想要的。

这将是使用回调函数的示例，假设 doSomethingWithState 返回更新后的状态对象，并且当然是不可改变的。

stuff2() {
  this.setState((state) => {
    const updatedState = doSomethingWithState(state);
    return state;
  })
}

这是一篇关于使用函数与 setState 的精彩文章，并且还包含一个演示该问题的 codepen 示例。 https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1#.gm2t01g70