setState到底是同步还是异步？

哈喽，大家好呀，我是前端理想哥。最近，发现好多人在setState是同步还是异步这个问题上犯迷糊，说不清楚，今天理想哥想给大家彻底把这个问题讲清楚，先说结论：

在react 18之前，只要是进入到了react 的调度流程，就是异步处理，异步处理就是批量处理，没有进入到react 的调度流程，就是同步处理。setTimeout、setInterval等原生事件都不会进入到react的调度流程，而合成事件，都会进入到react 的调度流程。

但是这种同步处理会有极大地性能浪费，比如，你调用了setState三次，React就会重复渲染三次，但其实你只需要渲染最后一次的结果。

所以，从react 18开始，当你使用createRoot创建应用后，所有的事件都会自动进行批量处理了，但是如果你还是依然使用render进行渲染，那么，事件流程还是和react 18之前的机制一样。

接下来，我们从源码角度来理解下。大家可以看图中的关键源码

// executionContext：react 目前所处的阶段
// NoContext：初始值，代表没有任务在处理

if (executionContext === NoContext) {
  // 同步调用setState
  flushSyncCallbackQueue();
}

function batchedEventUpdates$1(fn, a) {
  var prevExecutionContext = executionContext;
  // 进入到React调度流程中，异步处理
  executionContext |= EventContext;
}

function batchedUpdates$1(fn, a) {
  var prevExecutionContext = executionContext;
  // 进入到React调度流程中，异步处理
  executionContext |= BatchedContext;
}

从上面代码大家可以看到，只要executionContext没有被赋值，依然保持NoContext，那就会采用同步处理

而在react 18版本中，这段代码被改成了这样：

if (
  lane === SyncLane && 
  executionContext === NoContext && 
  (fiber.mode & ConcurrentMode) === NoMode && 
  !( ReactCurrentActQueue$1.isBatchingLegacy)) {
  flushSyncCallbacksOnlyInLegacyMode();
}

这段代码代表，只有在优先级是同步任务且没有进入到react 的调度流程且是ConcurrentRoot模式且在act函数调用的时候

在这里面，只有当你使用了createRoot创建应用后，fiber.mode才会是ConcurrentMode模式，act函数这个理想哥就不细讲了，大家可以下去自己了解下。

只有上面这些条件都满足了，才会进行同步任务，也就是说，当你使用createRoot创建应用后，所有的事件都会自动进行批量处理了，但是如果你还是依然使用render进行渲染，那么，事件流程还是和react 18之前的机制一样。

以上，就是所有内容了，如果大家觉得还不错，欢迎给理想哥一个一键三连，万分感谢。