道招

React执行调度流程梳理笔记

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

React执行调度流程梳理笔记

触发更新

我们最常见的触发更新的方式就是更新state了,可以分别从类组件和函数组件看看这时会发生什么。

类组件之 setState:

当触发setState本质上是调用enqueueSetState

enqueueSetState(inst,payload,callback){
    const update = createUpdate(eventTime, lane);
    enqueueUpdate(fiber, update, lane);
    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
}
函数组件之 useState

再看一下 hooks 的useState

function dispatchAction(fiber, queue, action) {
    var lane = requestUpdateLane(fiber);
    scheduleUpdateOnFiber(fiber, lane, eventTime);
}

可以看出来useStatesetState最后都是调用scheduleUpdateOnFiber方法。

看看scheduleUpdateOnFiber方法的原理吧

export function scheduleUpdateOnFiber(fiber,lane,eventTime){
    if (lane === SyncLane) {
        if (
            (executionContext & LegacyUnbatchedContext) !== NoContext && // unbatch 情况,比如初始化
            (executionContext & (RenderContext | CommitContext)) === NoContext) {
            /* 开始同步更新,进入到 workloop 流程 */
            `performSyncWorkOnRoot`
            2. 进入调度(root);
         }else{
               /* 进入调度,把任务放入调度中 */
               ensureRootIsScheduled(root, eventTime);
               if (executionContext === NoContext) {
                   /* 当前的执行任务类型为 NoContext ,说明当前任务是非可控的,那么会调用 flushSyncCallbackQueue 方法。 */
                   flushSyncCallbackQueue();
               }
         }
    }
}

可以看主要分两类

  1. 直接触发performSyncWorkOnRoot,接下来就可以进入调和阶段performSyncWorkOnRoot了。
  2. 进入调度阶段ensureRootIsScheduled,但是里面部分场景会直接触发flushSyncCallbackQueue 2.1 非可控任务:比如是在延时器(timer)队列或者是微任务队列(microtask) 2.2 空闲期的同步任务:避免出现在浏览器空闲状态下发生一次 state 更新,但还需要等到下一次空闲帧才执行

进入调度阶段ensureRootIsScheduled是做什么呢?

function ensureRootIsScheduled(root,currentTime){
    /* 计算一下执行更新的优先级 */
    var newCallbackPriority = returnNextLanesPriority();
    /* 当前 root 上存在的更新优先级 */
    const existingCallbackPriority = root.callbackPriority;
    /* 如果两者相等,那么说明是在一次更新中,那么将退出 */
    if(existingCallbackPriority === newCallbackPriority){
        return 
    }
    if (newCallbackPriority === SyncLanePriority) {
        /* 在正常情况下,会直接进入到调度任务中。 */
        newCallbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
    }else{
        /* 这里先忽略 */
    }
    /* 给当前 root 的更新优先级,绑定到最新的优先级  */
    root.callbackPriority = newCallbackPriority;
}

ensureRootIsScheduled主要做的事情有:

  • 首先会计算最新的调度更新优先级 newCallbackPriority,接下来获取当前 root 上的 callbackPriority 判断两者是否相等。如果两者相等,那么将直接退出不会进入到调度中。
  • 如果不想等那么会真正的进入调度任务 scheduleSyncCallback 中。注意的是放入调度中的函数就是调和流程的入口函数performSyncWorkOnRoot
  • 函数最后会将 newCallbackPriority 赋值给 callbackPriority。

那么如果在正常模式下(非异步)一次更新中触发了多次setState 或者useState,那么第一个setState进入到ensureRootIsScheduled就会有 root.callbackPriority = newCallbackPriority,那么接下来如果还有setState或(useState),那么就会退出,将不进入调度任务中,原来这才是批量更新的原理,多次触发更新只有第一次会进入到调度中。

总结

不管是直接执行还是进入调度,都是对调和流程的入口函数performSyncWorkOnRoot的处理,区别只不过是何时执行的时机而已,因为最终都会以此进入调和流程。

参考自《React 进阶实践指南之原理篇-更新流程:进入调度任务》

更新时间:
上一篇:下一篇:

相关文章

关注道招网公众帐号
联系博主