React 源码探源 1 Mount

写在前面

React 在上一周(2021年6月8日) 出了 18 beta，作为一个资深 React 玩家，如果未能通读过 React 源码，出门都不好意思跟人打招呼。本系列是笔者通读 React 17 源码的一个尝试。
本系列并不是 React 官方作者的行为，有些结论是处于笔者自己的理解，如有不当或者遗漏请各位老师和同学指正。
本系列尽量在完整的主题上切分主题。然而因为 React 源码的复杂度，这几无可能。如果未能做到完整的切分，本文应尽量做到各个文章之间的无关性。

参考

从头自己来读 React 的源码是一件很有挑战的事情，而且有可能误入歧途。本文并不是从头开始自己来，主要参考了 Youtube 的 React Source Code Walkthrough。 需要的同学请自行带梯子。

相关环境

代码

本文所有的源码都参考于 react repo, 使用的版本是 17.0.3, Commit 是 e16d61c3000e2de6217d06b9afad162e883f73c4

启动环境

如要探寻 React 源码，需要本地编译启动 React 源码，请参考 React 官方文档

1. 提交 Pull Request.
2. 必要条件
3. 开发工作流程

一般来讲，开发环境都是完备的，笔者只是安装了JDK 。

在开始之前，需要保证

1. yarn build 能够正确执行。
2. fixtures/packaging/babel-standalone/dev.html 可以正常打开。

React Mount 过程

首先我们打开 fixtures/packaging/babel-standalone/dev.html，可以看到页面的渲染结果:

image.png

通过 Chrome DevTools 里面的 performance 可以看到 ReactDOM.render 的调用栈:

React Mount 调用栈

一般来讲，React 将整个 Mount 过程分解为 Render 和 Commit 过程，Render 的过程主要在 workLoopSync 完成，Commit 过程主要在 commitRoot中完成。

加载主流程

图中向右表示调用栈深入，向下表示继续执行。

createRoot

实际上观察调用栈可以发现，在 Render 之前， React 还有调用了 legacyCreateRootFromDOMContainer，这个过程目前发现的主要工作是给 ReactDOM 挂载点初始化事件监听，就是在 listenToAllSupportedEvents 中完成的工作。

Render 阶段

本阶段主要是创建 fiber tree，以及 fiber tree 对应的 DOM Tree，每个 fiber 对应于一个 work，对应一个 React 节点。
渲染的 fiber tree 可以在 ReactDOM 的 DOM 的根结点查看到:

DOM 上的 React Fiber Tree

生成的 fiber 树如下，这就是一般意义上讲的虚拟 DOM 树。

Fiber Tree

图中蓝色表示 fiber 节点， 绿色表示 DOM 节点。

本系列后续会通过更多的例子来探究 Fiber 树的结构，现在可以先说一下现在笔者发现的一些结论。

Fiber 树中使用 child 表述子节点，通过 return 表述父节点，通过 sibling 表述兄弟节点。通过 stateNode 表述关联的 DOM 节点。
Fiber 树实际上有两个，相互之间通过 alternate 连接。在 commit 之前，fiber 树根的 current 下面还没有子节点，当整体渲染结束以后，fiber 树根的 current 会指向当前的 current.alternate.

Commit 阶段

Commit 阶段会将现在的 fiber tree 渲染到 DOM 树中，并且执行组件中可能的 effect。本系列会用更多的例子来探究 Commit 的过程。