万字长文+图文并茂+全面解析 React 源码 - render 篇

今天想了比较久的时间，准备开启这一系列的文章，旨在对 React 系列的源码进行深度解析，其中包含但不限于 react、react-dom、react-router... 等一系列优秀的 React 系列框架，最后再一一实现这些框架的简易版本。

本篇文章将会是对 react 和 react-dom 渲染过程源码的深度解析，我们将从官方 API 以及一些简易 Demo 来进入 react 的内部世界，探讨其中奥妙。

本文解析的 react 版本为 v16.13.0，是我 fork 的官方仓库， 源码地址。

结构剖析

我们先从最基础的结构开始解析，从上面这张图来看看。我们创建了一个 App 类，继承于 React.Component 类，在 render 生命周期函数中返回了一个 jsx 格式的 html 标签集合。我们打开控制台，查看创建的实例（如下图）：

我们逐一分析其中比较关键的属性：

字段	解释
props	把 Component 组件比作函数，props 就是函数的入参
context	context 就是在组件树之间共享的信息
refs	访问原生 DOM 元素的集合
updater	负责 Component 组件状态的更新
_reactInternalFiber	App 实例对应的 FiberNode

一个 Component 实例的大致结构我们就解析完了，我们现在需要由内到外的继续解析 Component 内部结构以及实现。

我们现在来看看 render 方法内部， 第 7 行 的内容属于 jsx 语法，是一种 html 语法格式类似的高级模板语法。这一段我们需要借鉴一下官方的一张图来进行解释：

从上图可以得知，jsx 语法都会被编译成 React.createElement 函数，标签属性以及标签内容都会编译成对应的入参，由此可知我们所写的 第 7 行 代码在编译后将会变成如下代码：

React.createElement("section", {}, "Hello World");

而 React.createElement 所创建的对象就是 虚拟 DOM 树，那么内部创建的工作流程是什么样的？带着这个问题，我们进入下一个章节。

React.createElement

我们刚才得知 jsx 语法将会被编译成 React.createElement 函数调用，而这个函数属于 React 对象上的一个方法，现在我们就可以开始进入到源码解析，查看内部实现。

上图就是 React.createElement，我们先看最后返回的结果是 ReactElement 函数的执行结果，该函数最后返回的是一个 React Element 对象（后面会提到）。

所以 React.createElement 其实是一个工厂函数，用于创建 React Element 对象，我们再来看看这个工厂函数主要做了哪些工作。

• 11-29 行：收集了 config 中的一些字段，并且将其他非内置字段添加到 props 对象中；
• 31-40 行：将入参中的 children 参数挂载到 props 的 children 字段中；（本示例中 "Hello World" 就是一个 “children”）
• 42-49 行：收集组件（type 可能是字符串也有可能是 Component 实例，例如
  和 ）中设置的 defaultProps 属性；

在完成一系列的初始化工作后，进入了 ReactElement 的创建工作（见下图）。

ReactElement 函数就比较一目了然了，返回了一个 element（React Element） 对象。React Element 对象其实就是一棵虚拟 DOM 树（$$typeof 字段表示了这是一个 React Element 类型），包含了标签和属性（attribute）信息。Component 执行 render 函数得到 虚拟 DOM 树，再通过 react-dom 将其包装成 FiberNode，然后被解析成 真实 DOM 树 后渲染在页面中（对应的容器内），这个我们后续再详细解析，这里就不展开了。

我们最后对 React Element 的创建过程画一个流程图来加深理解。（见下图）

React.Component

我们接下来要对 React.Component 进行进一步的解析，看看 Component 整体的运行逻辑以及是如何使用 React.Element 的。

Component 属于一个构造函数（见上图），Component 定义了几个属性，分别是 props、context、refs、updater，这些属性在之前已经解释过，这里不再复述。这里需要注意的是 Component 中的两个方法 setState 和 forceUpdate，调用的都是内部 updater 的方法进行事件通知，将数据和 UI 更新的任务交给了内部的 updater 去处理，符合 单一职责设计原则。

到这里，Component 类的结构已经解析完成了。什么，这就解析完成了？生命周期函数呢？渲染过程呢？一个都还没有看到啊。别着急，由于 React 内部的职责划分与不同平台实现，所以这部分根据不同平台的实现被放在了 react-dom 或 react-native 中。我们接下来就对我们常用的浏览器端，react-dom 中渲染过程以及对组件生命周期的处理进行详细的梳理。在此之前，放张图对本章的 Component 进行小结。

渲染过程（react-dom）

render 函数

在解析完了 React.Element 和 React.Component 之后，可能很多人只是了解到了基础结构体的创建，还是感觉云里雾里。现在我们来理一理 react-dom 的整个渲染过程以及组件生命周期，从 constructor 组件的创建到 componentDidMount() 组件的挂载，最后再画一个流程图来进行总结。

react 本身只是一些基础类的创建，比如 React.Element 和 React.Component，而后续的流程则根据不同的平台有不同的实现。我们这里以我们常用的浏览器环境为例，调用的是 ReactDOM.render() 方法（见下图），我们现在就来对这个方法的渲染过程做一个详细解析。

从上图可以看出，render 函数返回 legacyRenderSubtreeIntoContainer 函数的调用，而该函数最终返回的结果是 Component 实例（也就是 App 组件，见下图）。

FiberNode

我们来看看 render 函数内部调用的 legacyRenderSubtreeIntoContainer 函数（见下图）

在 legacyRenderSubtreeIntoContainer 中的 第 28 行，就是 FiberNode 树 的创建过程。

FiberNode 由内部的 createFiber 函数进行创建（见下图）。（这也是 React 在 16 版本后作出的巨大更新，这个后面我们再展开说）。

FiberNode 被创建后挂载在了 FiberRoot.current 上。最后，App 组件作为根组件实例被返回，而接下来的渲染过程由 FiberNode 接管。

我们画一个流程图来帮助理解（见下图）。

从上图可以看出，我们的 React Element 作为 render 函数的入参，创建了一个 FiberNode 实例，也就是 FiberRoot.current，而后续的渲染过程都由这个根 FiberNode 接管，包括所有的生命周期。

递归构建 FiberNode 树

在构建完了根 FiberNode 实例后，第 40 行 调用了 updaterContainer 函数开始构建整棵 FiberNode 树以及完成 DOM 渲染（见下图）。

updaterContainer 是一个比较关键的函数，我们来解析一下这个函数做了什么：

• 第 8~14 行：React 内部的更新任务设置了优先级大小，优先级较高的更新任务将会中断优先级较低的更新任务。React 设置了 ExpirationTime 任务过期时间，如果时间到期后任务仍未执行（一直被打断），则会强制执行该更新任务。同时，React 内部也会将过期时间相近的更新任务合并成一个（批量）更新任务，从而达到批量更新减少消耗的效果。（React setState “异步” 更新原理）
• 第 16~21 行：从父组件中收集 context 属性（由于这里是 root 组件，所以父组件为空）。
• 第 23~31 行：构建更新队列，第 24 行 将 Element 实例（见下图 1）挂载在 update 对象上，第 31 行 将更新队列（updateQueue) 挂载在 FiberNode 实例（见下图 2）。

• 第 32 行：内部开始递归调度，创建 FiberNode 树。创建一个工作节点快照 workInProgress（初始值是根 FiberNode），围绕着 workInProgress 对 updateQueue 展开构建工作（见下图）；

根据 updateQueue 更新节点（ performUnitOfWork 将返回 workInProgress.child，直到所有节点遍历完成）

创建 FiberNode 子节点

进入 performUnitOfWork 函数内部，我们省略掉一系列目前不需要关注的函数，首先进入到 beginWork 函数（见下图）。

beginWork 函数会根据 props 和 context 是否改变（第 12~15 行）、当前当前节点优先级是否高于正在更新的节点优先级（第 17 行）这两项来决定当前节点是否需要更新。

然后根据节点的标签类型（tag），调用不同的函数进行内部状态更新。（见下图）

Root(FiberNode) 节点更新 - updateHostRoot

我们第一次进入是 root 节点，所以进入到 updateHostRoot 函数内部逻辑进行处理。（见下图）

按照惯例，我们逐行解析函数所做的事情：

• 第 2 行：将一系列有用的信息推入内部栈（其中包括 #app 实例、context 信息等等）。
• 第 5~7 行：收集节点新的 props 属性和旧的 state、children 属性。
• 第 8 行：浅复制更新队列，防止引用属性互相影响；
• 第 9 行：执行更新队列，主要的任务是将 React.Element 添加到 Fiber 的 memoizedState 和 updateQueue 更新队列中（见下图）;

• 第 36~45 行：对上一步的 memoizedState 中的 element 进行进一步的处理，将其封装成 FiberNode 然后挂载在 workInProgress(当前工作节点快照).child 属性上，最后将该 child 返回。

到这一步，FiberNode 树的第一个节点就已经构建完成并挂载，我们来画一张流程图进行梳理（下图）。

App Component(FiberNode) 更新流程 - updateClassComponent

接下来就是对子节点的依次更新流程（见下图），也就是 App Component 对应的 FiberNode。依然是 beginWork 函数，在 第 232~246 行 调用我们的 App Component 节点的更新流程。

constructClassInstance

在 updateClassComponent 函数中，有三个关键函数，第一个就是 constructClassInstance。

在 constructClassInstance 函数中（见上图 1）：

• 第 96 行 创建 App Component 实例。
• 第 101 行 将实例挂载在 workInProgress 的 stateNode 属性中（件上图 2）
• 第 107 行 最后返回该实例。

mountClassInstance

在 constructClassInstance 执行完成后，接下来执行第二个关键函数 mountClassInstance。

mountClassInstance 函数中对 Component 实例进行挂载的一些初始化工作（见上图）。我们从上图可以看出，到了这里就开始了 Component 的生命周期钩子逻辑。

在初始化实例的一些基础属性后，第 136~145 行执行了 Component 的第一个生命周期钩子，也就是 getDerivedStateFromProps（见上图），它使用返回的对象来更新 state。

而紧随其后（见下图） 第 153 行 触发了第二个生命周期钩子 componentWillMount，主要用于在挂载前执行一些操作。

finishClassComponent

在实例创建完成并且调用了上面两个生命周期钩子后，进入到最后一个关键函数 finishClassComponent。

在 finishClassComponent 中 render 函数（见上图）。而 render 函数执行返回的就是 React.Element（虚拟 DOM 树）（下图 1），最后将其包装成 FiberNode 后返回（下图 2）后进入进入 workLoopSync 流程。

React Element(FiberNode) 更新流程 - updateHostComponent

还是 beginWork 函数（见下图），进入 updateHostComponent 进行 React Element(FiberNode) 组件更新阶段。

在 第 13 行 会对组件的 children 类型进行判断，判断是否为纯文本内容，我们在此处就是纯文本（section 标签内的 Hello World 文本），随后 nextChildren 就将被置空。

到这里，nextChildren 已经为空，完整的 FiberNode 树就已经构建完成。beginWork 结束，接下来进入到新的流程。

创建 真实 DOM 树

在结束了 beginWork 流程后，将调用 createInstance 函数创建 真实 DOM 树（见下图）。

在 createInstance 内部调用了 createElement 函数创建了 真实 DOM 节点（见下图 1），然后通过递归遍历 props 中的属性（包括 children）构建了一棵 真实 DOM 树（见下图 2）

通过调用 createInstance 方法创建真实 DOM（此时还没有插入到文档中）后，然后将 DOM 树 对象挂载到 FiberNode 的 stateNode 属性上（见下图）。

在 真实 DOM 树构建完成后，并且此时 workInProgress.child 也为 null，本次 workLoopSync 流程将在此结束，接下来进入到 finishSyncRender 函数，进行节点的渲染工作。

渲染真实 DOM

react-dom 将在回调函数内部将调用 insertOrAppendPlacementNodeIntoContainer 方法对 FiberNode 进行遍历。（见下图）

由上图可知该函数会对 Host 节点（带有 html tag 结构的节点）调用 appendChildToContainer 函数进行渲染，其他节点取其 child 值进行递归调用。

在 appendChildToContainer 函数内部，通过 appendChild 将 FiberNode 上的 stateNode （我们在上一步创建好的 真实 DOM 树）添加到 container（#app）中，然后调用 componentDidMount 生命周期钩子函数。（见下图）

到了这一步，页面中就渲染了我们在 render 中设置的 jsx 语法标签（Hello World）（见下图），我们的渲染流程解析宣告完成！

最后也是按照惯例，用一张流程图来梳理我们的整个渲染过程。

在本篇文章主要是解析 React 的整个渲染过程，对 React 的整体结构和工作流程有了个初步的了解，下一章将围绕着 Component 的生命周期与 setState 进行解析，如有需要可以关注专栏后续更新。

原文地址