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

Question

I recently read through a large portion of the React and ReactDOM codebase in order to get an understanding of what happens when a call to setState occurs. At this point, I would say that I understand the sequence of events at a high level. A call to setState results in a message being added to a queue of updates that need to be processed. The updates are processed and changes to the DOM are only made if necessary.

Here's where I am lost. There are hundreds of blog posts discussing the asynchronous behavior of setState. While I don't doubt that setState is asynchronous, I cannot find a line of code in the ReactDOM codebase that would introduce asynchronous behavior. Does anyone know exactly where this happens?

Answer 1

First of all setState may be execute in async way, but it is not allwys executed as such. Ben Nadel list some of his findings in setState() State Mutation Operation May Be Synchronous In ReactJS

To summarize setStates seems to gets batched in situations where react can intercept originating event, like onClick handlers. Since react creates actual DOM from virtual react DOM (and since it is aware of semantics of attributes) it can wrap any of onClick handlers that you provide into something like this

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

In this case you get async behavior, all setState calls get enqueued, and they get executed only after your original onClick handler has finished executing.

Note this is not actual react code it is just my speculation how it is async effect achieved. I understand it is not actual line of code that does it, but I think it could help you find it.

Best article explaining setState implementation that I found is on React Kung Fu

Answer 2

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