资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【Under-the-hood-ReactJS-Part0】React源码解读

【Under-the-hood-ReactJS-Part0】React源码解读

Turbo / 3133人阅读

摘要：接上文完整流程图见继续我们的之旅，让我们从的调用开始。他们就是用来表示组件方法的返回值，除此之外，没有其他的。同时，在的创建期间，将会合并和如果有声明的话，并且严重。显然，这一步骤会引起一些性能问题。

接上文---

完整流程图见：https://bogdan-lyashenko.gith...
继续我们的React之旅，让我们从ReactDOM.render的调用开始。

ReactDOM.render

ReactDOM.render是我们分析的入口点。我们的应用从这里开始渲染内容到DOM树中。为了方便调试，我们创建了一个的简单组件。整个流程的第一个动作就是把JSX转换成React elements 。 React elements就是带一些架构的简单对象。 他们就是用来表示组件render方法的返回值，除此之外，没有其他的。对象中的一些字段，如props，key，ref对于大家应该已经很熟悉了。 type属性表示的是JSX定义的标记对象，在我们的案例中，就是类 ExampleApplication, 当然，它也可以表示 Button标签的字符串格式等等。 同时，在React element的创建期间，React将会合并defaultProps和props（如果有声明的话），并且严重propTypes。
更多详情请查看源码 srcisomorphicclassicelementReactElement.js

ReactMount

在流程图中，你可以发现有个叫做ReactMount的模块。它包含了整个组件挂载的逻辑。
其实，ReactDOM中是没有任何逻辑的，它不过是一个用来调用ReactMount的接口，所以当调用ReactDOM.render方法时，技术上来说，你真正调用的是ReactMount.render方法。那么整个挂载过程到底是怎么样的呢？

Mounting is the process of initializing a React component by creating its representative DOM elements and inserting them into a supplied container.（挂载是指初始化一个React组件的过程，包括生成组件对应的DOM元素并插入指定的容器中）

以上文字来自于React代码的注释，那么这些到底是一个怎么样的过程呢？我们先看下以下的一个转化：
React需要将你组件里的JSX描述转化为对应的HTML结构，并插入到DOM树中，这个过程，
React需要处理所有的属性，绑定的事件，内嵌的组件和所有逻辑。挂载，就是指把用高层次语言描述的组件（JSX）转化为低层次的html代码，然后插入到DOM树中。

为了让以上描述更具体下，考虑如下需求：

目标：确保滚动事件被监听
在一个根组件的第一次渲染过程中，React会初始化滚动监听事件，并且把滚动条相关数值缓存起来，这样，当应用代码可以在不触发重排(reflow)的前提下，访问到滚动条相关数据。由于不同的游览器会有不同的实现，一些DOM的数值是非固定的，每次当你在代码中获取它们时，它们都有可能会重新计算。显然，这一步骤会引起一些性能问题。比如，一些老的游览器，是不支持pageX和pageY属性的。为了解决这个问题，React会做一些优化,而这些优化过程中，可能就会需要很多其它技巧。在其它问题中，React为了解决某个具体的问题，都会用到很多技巧，滚动条就是一个具体的列子。
实例化React组件

回顾下最开始的流程图，这里有一个实例创建的过程。事实上，目前去创建一个的实例还有点早，这里我们真正实例化的是类TopLevelWrapper（React内部类）。我们先跳过这个过程，看下一个流程。

在JSX的转化过程中，这里有三个阶段。JSX转化成React elements后，React elements会被转化为以下内部React组件类型中的一：ReactCompositeComponent(开发自定义的组件)，ReactDOMComponent（HTML DOM节点），ReactDOMTextComponent（文本节点）。我们先忽略ReactDOMTextComponent，重点放在前两个。

什么是内部组件呢？你可能已经听过虚拟DOM。虚拟DOM是一种DOM的表示方式，在React的diff差异计算以及其它过程中，使用虚拟DOM使得可以不直接DOM树，而这恰是React性能不错的原因之一。其实，在React的源码中，并没有什么文件或者类被称作虚拟DOM，因为虚拟DOM只是一种概念，一种用来描述如何处理真实DOM的手段。有些人可能会说虚拟DOM表示的就是React elements，但是我不这么认为。在我看来，虚拟DOM指的是这三个类：ReactCompositeComponent，ReactDOMComponent，ReactDOMTextComponent。稍后我会详细解释原因。

让我们继续组件的实例化。我们会创建一个ReactCompositeComponent的实例，但是，
这个实例并不是因为我们将放入ReactDOM.render中然后才生成的。React总是从TopLevelWrapper里开始渲染一个组件树。它几乎是一个纯包装组件，它的render方法（组件的render方法）将会返回。代码如下：

//src
enderersdomclientReactMount.js#277
TopLevelWrapper.prototype.render = function () {
  return this.props.child;
};

根据以上代码，很显然只有一个TopLevelWrapper的实例被创建了，除此之外就没有其它的了。在继续下一步之前，我们看下以下内容：

DOM内嵌验证
几乎每次内嵌组件渲染时，它们都会被一个专门用来做HTML验证的模块--validateDOMNesting--来验证结构是否合法。所谓的DOM内嵌验证是指校验子模块和父模块的标签层次。比如，如果父组件的标签是