由代码可见,在开始 render 的时候,主要调用了
const root = enqueueUpdate(current, update, lane);
参数
-
current
是需要渲染的根结点的 current tree, -
update
中主要包括 element,指向传递尽量的 react element。 - lane 是
DefaultEventPriority
(=16),这个值是通过 window.event (DOMContentLoaded
) 计算得来,具体起何种作用尚且未知
Screen Shot 2022-08-24 at 8.46.50 PM.png
作用
目前看起来,这个函数主要的作用就是在 concurrentQueues
中插入数值,数值结构
// 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 个
-
scheduleCallback
可以理解 fiber tree 已经准备完毕,当前 macrotask 已经结束,通过MessageChannel.postMessage
启动另外的 macrotask 执行剩余的工作。
使用 MessageChannel.postMessage,而不是用 setTimeout
,是因为 setTimeout
有 4ms 延迟。
至此为止,render 的 work loop 尚未开始。
网友评论