彻底解析 React 源码：探秘 “归” 阶段的 Mount 奥秘

在上一篇文章中，我们深入探讨了 React 源码中的 “进” 阶段 render 过程。render 阶段采用深度优先遍历的方式依次执行 beginWork 和 completeWork 函数，将虚拟 DOM 转化为 JavaScript 对象。现在，让我们继续前进，探秘 “归” 阶段 mount 时的流程。

“归” 阶段 mount：将 JavaScript 对象转化为真实 DOM

“归” 阶段的主要目标是将 JavaScript 对象转化为真实 DOM。该阶段由 commitRoot 函数触发，commitRoot 函数负责将待提交的 Fiber 节点转化为真实 DOM 并插入到父容器中。commitRoot 函数首先调用 commitSyncRoot 进行同步提交，同步提交是指立即将 Fiber 节点转化为真实 DOM。如果浏览器处于空闲状态，则 commitRoot 会直接调用 commitSyncRoot。否则，commitRoot 会调用 commitAsyncRoot 进行异步提交，即在浏览器空闲时再将 Fiber 节点转化为真实 DOM。

React 如何实现深度优先遍历

React 采用深度优先遍历的方式来执行 beginWork 和 completeWork 函数。深度优先遍历是指先遍历某个节点的所有子节点，然后再遍历该节点本身。这种遍历方式使得 React 可以一次性完成对整个组件树的遍历，并确保父组件在子组件之前完成更新。

深度优先遍历的优势

深度优先遍历具有以下优势：

• 确保父组件在子组件之前完成更新。
• 可以避免不必要的重复渲染。
• 能够生成更小的 DOM 树。

“归” 阶段的具体流程

“归” 阶段的具体流程如下：

1. commitRoot 函数触发 “归” 阶段。
2. commitRoot 函数调用 commitSyncRoot 进行同步提交或 commitAsyncRoot 进行异步提交。
3. commitSyncRoot 或 commitAsyncRoot 调用 commitMount 进行 mount 操作。
4. commitMount 调用 mountNativeChildren 插入真实 DOM 元素。
5. commitMount 调用 mountComponent 插入 React 组件。

结语

通过对 React 源码 “归” 阶段 mount 过程的剖析，我们了解到 React 如何将虚拟 DOM 转化为真实 DOM，并展示了 React 深度优先遍历算法的应用和优势。