[FE] React 初窥门径（五）：React 组件的加载过程（commit 阶段）

news2025/4/21 2:19:15

1. 回顾

前一篇文章我们看到，ReactDOM.render 总共包含这些步骤，

然后介绍了 performSyncWorkOnRoot 做的事情，它主要做了两件事，

renderRootSync 可称之为 render 阶段：创建了一颗 Fiber Tree（包含 html fragment 并未挂在到 DOM 中）
commitRoot 可称之为 commit 阶段：将 Fiber Tree 实际写入 DOM

前文我们重点介绍了 render 阶段 的业务逻辑，这个阶段由 renderRootSync 来完成，
其中 markRenderStarted 和 markRenderStopped 标志了 render 阶段 的开始和结束。

[6] performSyncWorkOnRoot                                   <- 已创建好了 一个 FiberRootNode 和 两个 FiberNode（下文解释）
    [7] renderRootSync
        [8] markRenderStarted                               <- 开始 render 阶段
        [8] workLoopSync                                    <- 从上到下处理 FiberTree
            [9] performUnitOfWork ---- [HostRoot {tag: 3}]  <- 处理 WIP FiberNode
                [10] beginWork$1
                    [11] beginWork
                        [12] updateHostRoot
                            [13] reconcileChildren          <- 创建 child FiberNode
            [9] performUnitOfWork ---- [IndeterminateComponent {tag: 2}] (<App />)  <- 处理 child FiberNode
                [10] beginWork$1
                    [11] beginWork
                        [12] mountIndeterminateComponent
                            [13] renderWithHooks
                                [14] Component
                            [13] reconcileChildren          <- 创建 child FiberNode
            [9] performUnitOfWork ---- [HostText {tag: 6}] ('hello world')          <- 处理 child FiberNode
                [10] beginWork$1
                    [11] beginWork
                        [12] updateHostText
                [10] completeUnitOfWork                     <- 从下到上处理 FiberTree
                    [11] completeWork ---- [HostText {tag: 6}] ('hello world')
                        [12] createTextInstance
                            [13] createTextNode
                                [14] createTextNode [HTMLElement] ('hello world')
                    [11] completeWork ---- [IndeterminateComponent {tag: 2}] (<App />)
                    [11] completeWork ---- [HostRoot {tag: 3}]
        [8] markRenderStopped                               <- 结束 render 阶段
    [7] commitRoot
        [8] runWithPriority$1
            [9] reactPriorityToSchedulerPriority
            [9] Scheduler_runWithPriority
                    [11] markCommitStarted
                    ？                                       <- 本文重点介绍这里
                    [11] markCommitStopped
    [7] ensureRootIsScheduled

需知在 performSyncWorkOnRoot 之前，React 已经创建好了 3 跟 Fiber 节点，

一个 FiberRootNode，tag 为 LagacyRoot：它的 containerInfo 指向了 div#root 这个 DOM 元素
两个互为 alternate 的 FiberNode，tag 为 HostRoot：它的 stateNode 指向了上面那个 FiberRootNode

我们来画一下它们的关系，

从图中可以看出 render 阶段 做的事情就是创建 FiberTree，
为一个标记为 WIP（workInProgress 变量）的 FiberNode 创建了多个子孙元素。
（在 render 阶段 执行过程中，workInProgress 这个全局变量的值会变，图中画的是它的初始值）

为了描述方便，图中略过了很多内容，例如 FiberNode 中的 updateQueue 等等。

2. 在大图中的位置

本文开始介绍 commit 阶段 的业务逻辑，
VSCode 插件 CodeTour 的安装可以参考前一篇文章，
相关仓库在这里 github: thzt/react-tour。

ReactDOM.render 的全流程在这里，
4.1.1 组件加载过程：函数组件（全流程）

我们要看这部分内容，即 commitRoot 的调用过程，

3. commitRoot 业务逻辑

一图胜千言，（函数前面的数字，表示缩进层次）

[7] commitRoot
    [8] runWithPriority$1
        [9] Scheduler_runWithPriority
            [10] eventHandler=commitRootImpl
                [11] markCommitStarted
                [11] invokeGuardedCallback                           <- 第一步
                    [12] invokeGuardedCallbackImpl$1
                        [13] dispatchEvent
                            [14] func=commitBeforeMutationEffects
                                [15] commitBeforeMutationLifeCycles
                                    [16] clearContainer              <- div#root 的 textContext 置空
                [11] invokeGuardedCallback                           <- 第二步（这里要注意，看下文）
                    [12] invokeGuardedCallbackImpl$1
                        [13] dispatchEvent
                            [14] func=commitMutationEffects
                                [15] commitPlacement
                                    [16] insertOrAppendPlacementNodeIntoContainer     <- 把 FiberNode <App /> 放到 div#root 中
                                        [17] insertOrAppendPlacementNodeIntoContainer <- 这是个递归函数，找到后代节点 stateNode 指向的 #text
                                            [18] appendChildToContainer
                                                [19] appendChild                      <-  实际操作 DOM，之后页面立即展示效果
                [11] invokeGuardedCallback                           <- 第三步
                    [12] invokeGuardedCallbackImpl$1
                        [13] dispatchEvent
                            [14] func=commitLayoutEffects
                [11] markCommitStopped

我们看到 commitRoot 总共包含了三个步骤：