React 18 源代码学习笔记 3 ReactDOM.rend

2022-08-24  本文已影响0人  吴摩西

由代码可见,在开始 render 的时候,主要调用了

const root = enqueueUpdate(current, update, lane);

参数

作用

目前看起来,这个函数主要的作用就是在 concurrentQueues 中插入数值,数值结构

Screen Shot 2022-08-24 at 8.57.42 PM.png
      // This is a normal update, scheduled from outside the render phase. For
      // example, during an input event.
      {
        if (isDevToolsPresent) {
          addFiberToLanesMap(root, fiber, lane);
        }
      }

将需要插入的 fiberNode 插入到 root 里的 pendingUpdatersLaneMap 中,由于 2>>4 = 16 (DefaultEventPriority),所以插入到了 第 4 个

Screen Shot 2022-08-24 at 9.01.55 PM.png
  1. scheduleCallback 可以理解 fiber tree 已经准备完毕,当前 macrotask 已经结束,通过 MessageChannel.postMessage 启动另外的 macrotask 执行剩余的工作。

使用 MessageChannel.postMessage,而不是用 setTimeout,是因为 setTimeout 有 4ms 延迟。

至此为止,render 的 work loop 尚未开始。

上一篇 下一篇

猜你喜欢

热点阅读