React 源码深度解读（一）：首次DOM元素渲染 - Part 1
欢迎关注我的公众号睿Talk，获取我最新的文章：
一、前言
React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深。阅读 React 源码是一个非常艰辛的过程，在学习过程中给我帮助最大的就是这个系列文章。作者对代码的调用关系梳理得非常清楚，而且还有配图帮助理解，非常值得一读。站在巨人的肩膀之上，我尝试再加入自己的理解，希望对有志于学习 React 源码的读者带来一点启发。
本系列文章基于 React 15.4.2 ，以下是本系列其它文章的传送门：
React 源码深度解读（一）：首次 DOM 元素渲染 - Part 1
React 源码深度解读（二）：首次 DOM 元素渲染 - Part 2
React 源码深度解读（三）：首次 DOM 元素渲染 - Part 3
React 源码深度解读（四）：首次自定义组件渲染 - Part 1
React 源码深度解读（五）：首次自定义组件渲染 - Part 2
React 源码深度解读（六）：依赖注入
React 源码深度解读（七）：事务 - Part 1
React 源码深度解读（八）：事务 - Part 2
React 源码深度解读（九）：单个元素更新
React 源码深度解读（十）：Diff 算法详解
二、React.createElement
在写 React 项目的时候，我们一般会直接用 JSX 的形式来写，而 JSX 经过 Babel 编译后会将 HTML 标签转换为React.createElement的函数形式。如果想进行更深入的了解这一过程，可以看我之前写的这篇文章：你不知道的Virtual DOM（一）：Virtual Dom介绍。文章中的h函数，如果在 Babel 中没有特别指定的话，默认就是React.createElement。
下面，我们将从一个最简单的例子，来看React是如何渲染的：
ReactDOM.render(
<h1 style={{"color":"blue"}}>hello world</h1>,
document.getElementById('root')
);经过 JSX 编译后，会是下面这个样子：
ReactDOM.render(
React.createElement(
'h1',
{ style: { "color": "blue" } },
'hello world'
),
document.getElementById('root')
);先来看下React.createElement的源码。
// 文件位置：src/isomorphic/React.js
var ReactElement = require('ReactElement');
...
var createElement = ReactElement.createElement;
...
var React = {
...
createElement: createElement,
...
}
module.exports = React;最终的实现需要查看ReactElement.createElement：
// 文件位置：src/isomorphic/classic/element/ReactElement.js
ReactElement.createElement = function (type, config, children) {
...
// 1. 将过滤后的有效的属性，从config拷贝到props
if (config != null) {
...
for (propName in config) {
if (hasOwnProperty.call(config, propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)) {
props[propName] = config[propName];
}
}
}
// 2. 将children以数组的形式拷贝到props.children属性
var childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
// 3. 默认属性赋值
if (type && type.defaultProps) {
var defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
...
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props
);
};本质上只做了3件事：
- 将过滤后的有效属性，从 config 拷贝到 props
- 将 children 以数组或对象的形式拷贝到 props.children
- 默认属性赋值
最终的返回值是ReactElement函数的调用结果。我们再来看看它做了什么：
// 文件位置：src/isomorphic/classic/element/ReactElement.js
var ReactElement = function (type, key, ref, self, source, owner, props) {
var element = {
// This tag allow us to uniquely identify this as a React Element
$$typeof: REACT_ELEMENT_TYPE,
// Built-in properties that belong on the element
type: type,
key: key,
ref: ref,
props: props,
// Record the component responsible for creating this element.
_owner: owner,
};
...
return element;
};最终只是返回一个简单对象。调用栈是这样的：
React.createElement
|=ReactElement.createElement(type, config, children)
|-ReactElement(type,..., props)这里生成的 ReactElement 我们将其命名为ReactElement[1]，它将作为参数传入到 ReactDom.render。
三、ReactDom.render
ReactDom.render 最终会调用 ReactMount 的 _renderSubtreeIntoContainer：
// 文件位置：src/renderers/dom/client/ReactMount.js
_renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
...
var nextWrappedElement = React.createElement(
TopLevelWrapper,
{
child: nextElement
}
);
...
var component = ReactMount._renderNewRootComponent(
nextWrappedElement,
container,
shouldReuseMarkup,
nextContext
)._renderedComponent.getPublicInstance();
...
return component;
},
...
var TopLevelWrapper = function () {
this.rootID = topLevelRootCounter++;
};
TopLevelWrapper.prototype.isReactComponent = {};
TopLevelWrapper.prototype.render = function () {
return this.props.child;
};
TopLevelWrapper.isReactTopLevelWrapper = true;
...
_renderNewRootComponent: function (
nextElement,
container,
shouldReuseMarkup,
context
) {
...
var componentInstance = instantiateReactComponent(nextElement, false);
...
return componentInstance;
},这里又会调用到另一个文件 instantiateReactComponent：
// 文件位置：src/renders/shared/stack/reconciler/instantiateReactComponent.js
function instantiateReactComponent(node, shouldHaveDebugID) {
var instance;
...
instance = new ReactCompositeComponentWrapper(element);
...
return instance;
}
// To avoid a cyclic dependency, we create the final class in this module
var ReactCompositeComponentWrapper = function (element) {
this.construct(element);
};
Object.assign(
ReactCompositeComponentWrapper.prototype,
ReactCompositeComponent,
{
_instantiateReactComponent: instantiateReactComponent,
}
);这里又会调用到另一个文件 ReactCompositeComponent：
// 文件位置：src/renders/shared/stack/reconciler/ReactCompositeComponent.js
var ReactCompositeComponent = {
construct: function (element) {
this._currentElement = element;
this._rootNodeID = 0;
this._compositeType = null;
this._instance = null;
this._hostParent = null;
this._hostContainerInfo = null;
// See ReactUpdateQueue
this._updateBatchNumber = null;
this._pendingElement = null;
this._pendingStateQueue = null;
this._pendingReplaceState = false;
this._pendingForceUpdate = false;
this._renderedNodeType = null;
this._renderedComponent = null;
this._context = null;
this._mountOrder = 0;
this._topLevelWrapper = null;
// See ReactUpdates and ReactUpdateQueue.
this._pendingCallbacks = null;
// ComponentWillUnmount shall only be called once
this._calledComponentWillUnmount = false;
...
}
...
}我们用ReactCompositeComponent[T]来表示这里生成的顶层 component。
整个的调用栈是这样的：
ReactDOM.render
|=ReactMount.render(nextElement, container, callback)
|=ReactMount._renderSubtreeIntoContainer()
|-ReactMount._renderNewRootComponent(
nextWrappedElement, // scr:------------------> ReactElement[2]
container, // scr:------------------> document.getElementById('root')
shouldReuseMarkup, // scr: null from ReactDom.render()
nextContext, // scr: emptyObject from ReactDom.render()
)
|-instantiateReactComponent(
node, // scr:------------------> ReactElement[2]
shouldHaveDebugID /* false */
)
|-ReactCompositeComponentWrapper(
element // scr:------------------> ReactElement[2]
);
|=ReactCompositeComponent.construct(element)组件间的层级结构是这样的：
到此为止，顶层对象已经构造完毕，下一步就是调用 batchedMountComponentIntoNode（来自 ReactMount 的 _renderNewRootComponent方法），进行页面的渲染了。
四、总结
本文介绍了 React 顶层对象 ReactCompositeComponent 的构建过程。通过 JSX 表达的 DOM 结构最终会转化为一个纯 JS 对象，用于下一步的渲染。