导致setState（React）异步的代码在哪里？

Question

我最近阅读了大部分的React和ReactDOM代码库，以便了解调用setState时会发生什么。在这一点上，我会说我理解高级别的事件顺序。对setState的调用会导致将消息添加到需要处理的更新队列中。处理更新并且仅在必要时才对DOM进行更改。

这是我迷路的地方。有数百篇博客文章讨论了setState的异步行为。虽然我不怀疑setState是异步的，但我在ReactDOM代码库中找不到会引入异步行为的代码行。有谁知道确切的发生在哪里？

Answer 1

首先，setState可以以异步方式执行，但不是allwys执行的。 Ben Nadel在setState() State Mutation Operation May Be Synchronous In ReactJS

中列出了他的一些发现

总结setStates似乎在反应可以拦截原始事件的情况下进行批处理，例如onClick处理程序。由于react从虚拟反应DOM创建实际DOM（并且因为它知道属性的语义），它可以将您提供的任何onClick处理程序包装成类似这样的

wrappedHandler = () => {
  turnBatchingOn()
  originalHanlder()
  executeBatched()
}

在这种情况下，您将获得异步行为，所有setState调用都会被排队，并且只有在您的原始onClick处理程序执行完毕后才会执行它们。

注意这不是实际的反应代码，只是我猜测它是如何实现异步效果的。我知道这不是实际的代码行，但我认为它可以帮助你找到它。

解释我发现的setState实现的最佳文章位于React Kung Fu

Answer 2

我认为setState不是异步，但是有多个setState调用的优化，在某些情况下可以保证sync canot。