javascript - 如何确保我正在阅读最新版本的状态？

Question

我可能遗漏了什么。我知道 setState 在 React 中是异步的，但我似乎仍然有这个疑问。

假设以下是用户单击我的应用程序上的任何按钮时的处理程序

1. ButtonHandler()
2. {
3. if(!this.state.flag)
4. {
5.   alert("flag is false");
6. }
7. this.setState({flag:true});
8. 
9. }

• 现在假设用户非常快速地先点击一个按钮，然后点击第二个。
• 想象一下处理程序第一次被调用时 this.setState({flag:true}) 被执行，但是当第二次调用处理程序时，状态从之前的调用尚未反射(reflect)出来 -- this.state.flag 返回了 false。
• 这种情况会发生吗(即使是理论上)？确保我阅读最新状态的方法有哪些？
• 我知道 setState(function(prevState, props){..}) 可以让您访问之前的状态，但是如果我只想像第 3 行那样读取状态而不设置它怎么办？

Answer 1

正如您正确指出的那样，要根据先前的状态设置状态，您需要使用函数重载。

I know setState(function(prevState, props){..}) gives you access to previous state

所以你的例子看起来像这样:

handleClick() {
  this.setState(prevState => {
    return {
      flag: !prevState.flag
    };
  });
}

what if I want to only read state like on line 3 and not set it?

让我们回过头来思考为什么您要这样做。

如果您想执行副作用(例如，记录到控制台或启动 AJAX 请求)，那么正确的地方是 componentDidUpdate 生命周期方法。它还可以让您访问以前的状态:

componentDidUpdate(prevState) {
  if (!prevState.flag && this.state.flag) {
    alert('flag has changed from false to true!');
  }
  if (prevState.flag && !this.state.flag) {
    alert('flag has changed from true to false!');
  }    
}

这是使用 React 状态的预期方式。您让 React 管理状态，不用担心何时它被设置。如果您想根据以前的状态设置状态，请将函数传递给 setState。如果您想根据状态变化执行副作用，请在 componentDidUpdate 中比较之前和当前的状态。

当然，作为最后的手段，您可以保持实例变量独立于状态。