React setState 源码解析

1. setState是同步还是异步？

• 在legacy模式下，在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout等是同步的
• 在concurrent模式下，即使是在setTimeout中也是“异步”的
• 严格意义上来说，应该不是异步，只是执行时间比同步晚，这里直接用“异步”来讲

2. setState是如何实现异步批量更新的？

当 setState 方法被调用后，方法内部会创建一个包含过期时间和优先级lane的update（更新器），将最新的state挂载在update的 payload上，最后将此 update 存放到 fiber的 updateQueue队列中

简单点说，就是每个fiber身上都会有一个更新队列，在调用setState时，会将状态临时存储到更新器中，当需要更新组件时再来执行更新队列中的内容，清空更新队列

• 批量模式：如果是批量模式，则会将执行更新，清空更新队列的方法延迟调用。此时scheduleUpdateOnFiber 方法内只会调用 ensureRootIsScheduled ，在事件方法结束后，才会调用 flushSyncCallbackQueue 方法
• 非批量模式：非批量模式下，则会在 ensureRootIsScheduled 调用结束后直接执行更新方法（flushSyncCallbackQueue）

3. setState执行流程分析（伪代码）

1. 首先，调用 setState 时，会调用 this.updater.enqueueSetState 方法

// 以下皆是伪代码
// 源码参考位置：ReactBaseClasses: react/src/ReactBaseClasses.js

export class Component{
    constructure(){
        this.updater = ClassComponentUpdater
    }
    
    setState(partialState,callback){
        this.updater.enqueueSetState(this,partialState,callback,'setState')
    }
}

// 源码参考位置：ReactFiberClassComponent: react-recondiler/src/ReactFiberClassComponent.js

let ClassComponentUpdater &#