React 18 源代码学习 17 首次渲染总结
2022-09-30 本文已影响0人
吴摩西
就目前看来,第一次渲染共经历了三次 javascript task。

两次 task 之间使用了 scheduleCallback
安排下一个 task。scheduleCallback
中实际使用 MessageChannel.postMessage
给浏览器安排新的任务。
每个 task 有如下要点:
第一个 Task
-
root = ReactDOM.createRoot
在 DOM 根节点中挂在各种 DOM 事件。 -
root.render
准备执行,初始化 fiber root,准备 update
第二个 Task
-
render
阶段,生成整个 fiber 树 -
commit
阶段开始执行,调用useLayoutEffect
第三个 Task
-
commit
阶段继续执行,调用layoutEffect