本文基于React17.0.0
setState的执行流程
简略来说，setState函数是React.Component类的一个办法，它记录了以后利用产生的更新update，并把这些update用一个队列updateQueue记录下来，而后进入scheduleUpdateOnFiber这个函数中进行调度更新，而后触发performSyncWorkOnRoot函数来进入render阶段。最初在commit阶段把更新渲染到dom上。
同步还是异步
为了更加具体的了解setState的执行行为，咱们先来看上面的代码，预设咱们是在ReactDOM.render的legacy模式下运行，你能够正确说出两次console.log的后果吗？
constructor(props) { super(props); this.state = { data: "hello" } }componentDidMount() { //第一个setState this.setState({ data: 'world' }) console.log("in componentDidMount: ", this.state.data); setTimeout(() => { // 第二个setState this.setState({ data: 'Bob' }) console.log("in setTimeout: ", this.state.data); }) }揭晓答案，后果是
咱们能够看到，第一个log输入的是hello，也就是说，当执行第一个setState时，是体现为同步行为的，在执行第二个setState时，log输入的是Bob，是体现为异步行为的。
那么这是为什么呢，能够粗略看出，两个setState执行的环境是不同的，第一个setState的执行环境是在componentDidMount()这个生命周期钩子函数中，第二个setState是在setTimeout中执行的。置信大家一眼就看进去了，问题的实质就是执行环境的不同，导致了setState在执行时的上下文就不一样了，而执行上下文executionContext，就是决定setState同步异步行为的要害。
为何executionContext为何在这个过程中这么重要呢，咱们在后面理解到setState在执行过程中会进入 scheduleUpdateOnFiber这个函数，咱们先来简略看下在React源码中，有什么蹊跷吧。
scheduleUpdateOnFiber
function scheduleUpdateOnFiber(fiber, lane, eventTime) { // 省略 ..... if (lane === SyncLane) {// ReactDOM.render 同步执行 if ( // Check if we're inside unbatchedUpdates (executionContext & LegacyUnbatchedContext) !== NoContext && // Check if we're not already rendering (executionContext & (RenderContext | CommitContext)) === NoContext) { // Register pending interactions on the root to avoid losing traced interaction data. schedulePendingInteractions(root, lane); // This is a legacy edge case. The initial mount of a ReactDOM.render-ed performSyncWorkOnRoot(root); } else { ensureRootIsScheduled(root, eventTime); schedulePendingInteractions(root, lane); if (executionContext === NoContext) { resetRenderTimer(); flushSyncCallbackQueue(); } } } else { // 省略 ..... } ensureRootIsScheduled(root, eventTime); schedulePendingInteractions(root, lane); } mostRecentlyUpdatedRoot = root;} 咱们能够看到其中的要害代码
if (executionContext === NoContext) { resetRenderTimer(); flushSyncCallbackQueue();}其中flushSyncCallbackQueue函数的作用就是同步执行更新队列里的更新update，后面咱们说过了setState后会把更新对象update以队列模式保留下来，这里就是要执行这些更新并清空队列。
咱们能够看出，如果以后的执行上下文executionContext是NoContext，也就是说明React曾经不处于本人的调度环节了，而是处于一种无事可做的状态时，React就会去同步的执行setState的回调函数进行更新。
那么，什么时候才会是一种无事可做的状态呢?
答案就是不处于React自身的调度阶段时，比方setTimeout，网络申请，间接在Dom节点上绑定的事件等，这些行为都不会触发React的调度行为。当React处于本人的调度阶段时，会依据所处的状态不同给executionContext赋值不同的值，如赋值为BatchedContext时阐明进入了更新合并阶段，而executionContext默认状况下就是NoContext。所以不在调度阶段时，React就会进入无事可做的状态，就会将setState同步执行。在React处于本人的调度阶段，会执行诸如生命周期钩子函数，合成事件等，在这些状况下，会触发batchedUpdate进行合并更新，所以此时将executionContext赋值为BatchedContext，那么天然就是异步的行为了。
在咱们的例子中，componentDidMount属于React调度流程的一部分，所以其中的setState会被异步执行，componentDidMount执行完后，React就退出调度过程了，此时的executionContext是 NoContext 了，然而咱们的代码还没有执行完，因为setTimeout是一个异步办法，等它的回调被执行的时候，React就会以同步的形式执行setState了。
setState与useState
useState是React为函数组件赋予状态的一种做法，然而它和setState的调用栈有重合的中央，也就是都会进入scheduleUpdateOnFiber函数，所以在同步异步的行为上是没有区别的。