React 的 setState 是异步的还是啥？

Posted 2023-02-22

【中文标题】React 的 setState 是异步的还是啥？

【英文标题】：Is React's setState asynchronous or something?React 的 setState 是异步的还是什么？

【发布时间】：2016-04-21 14:36:21

【问题描述】：

嗯。我正在使用setState，由于某种原因，它后面的代码无法访问新状态！

什么给了？！

【参考方案1】：

是的。它是异步的。我发布这个是因为这对于新的 React 用户来说并不是很明显。

对组件状态的“队列”更新做出反应。

如果您需要执行依赖于新状态更改的代码块，请像这样传递回调：

getInitialState: function () 
  return 
    isFinalCountdown: false,
  


//blablabla

//then somewhere you got...
this.setState(
  isFinalCountdown: true,
  function () //<--- whoa. this solves your all your synchrosity woes!
    console.log(this.state.isFinalCountdown); //true!
  
);

console.log(this.state.isFinalCountdown); //false!

所有这些都在文档中，只是确实需要重申一些内容，以避免新 React 用户可能遇到的常见错误。

查看：https://facebook.github.io/react/docs/component-api.html#setstate

【讨论】：

出于兴趣，这里的用例是什么？你已经知道新的状态是什么，因为你设置了它，那么通过this.state访问它有什么用？

你是对的。 setState 非常快，所以在大多数情况下，您不需要使用可选的回调函数。您可以期望“状态”在render 中是最新的。但是，如果您在某些专门的组件方法中使用 setState 并且需要立即访问该更新状态，则情况就不同了。你不会看到它，需要使用回调的东西。

只有在状态发生任何变化时才可以触发回调吗？

这很棒。我正在根据状态变化过滤数据，但直到我使用回调并回复大卫，是的，我知道新状态，但使用许多不同的过滤器时它会变得非常混乱，试图通过一堆参数而不是使用状态。