美文网首页
React 18 源代码学习笔记 3 ReactDOM.rend

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

作者: 吴摩西 | 来源:发表于2022-08-24 21:25 被阅读0次

由代码可见,在开始 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 中插入数值,数值结构

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 尚未开始。

相关文章

网友评论

      本文标题:React 18 源代码学习笔记 3 ReactDOM.rend

      本文链接:https://www.haomeiwen.com/subject/lhvogrtx.html