前言
React 是一个十分庞大的库,由于要同时考虑 ReactDom 和 ReactNative ,还有服务器渲染等,导致其代码抽象化程度很高,嵌套层级非常深,阅读其源码是一个非常艰辛的过程。在学习 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 是怎么渲染普通DOM元素的,如下图所示。
红线部分生成的markup
实际上是一层一层往回传,为了方便展示就直接跳过中间层级返回了。这张图片跳过了事务(transaction)相关的调用,后面会有专门的文章介绍。
本篇开始介绍自定义组件是如何渲染的。
App 组件
将自定义组件命名为App
,结构如下:
class App extends Component {
constructor(props) {
super(props);
this.state = {
desc: 'start',
};
}
render() {
return (
<div className="App">
<div className="App-header">
<img src="main.jpg" className="App-logo" alt="logo" />
<h1> "Welcom to React" </h1>
</div>
<p className="App-intro">
{ this.state.desc }
</p>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById(‘root’)
);
App 经过 Babel 编译后,生成如下代码:
class App extends Component {
constructor(props) {
super(props);
this.state = {
desc: 'start',
};
}
render() {
return React.createElement(
'div',
{ className: 'App' },
React.createElement(
'div',
{ className: 'App-header' },
React.createElement(
'img',
{ src: "main.jpg", className: 'App-logo', alt: 'logo' }
),
React.createElement(
'h1',
null,
' "Welcom to React" '
)
),
React.createElement(
'p',
{ className: 'App-intro' },
this.state.desc
)
);
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById(‘root’)
);
构建顶层包装组件
ReactCompositeComponent[T]
- 跟普通DOM元素渲染一样,第一步先会执行
React.createElement
创建 type 为 App 的ReactElement[1]
。 - 然后在
_renderSubtreeIntoContainer
里面创建 type 为 TopLevelWrapper 的ReactElement[2]
。 - 通过
instantiateReactComponent
创建包装元素ReactCompositeComponent[T]
。
调用关系如下图所示:
初始化
ReactCompositeComponent[T]
- 在下一步
mountComponentIntoNode
时,ReactDOMContainerInfo[ins]
会被创建并传给ReactReconciler
。 -
ReactReconciler
会调用ReactCompositeComponent[T]
的 mountComponent 创建 TopLevelWrapper 实例。 - 然后就是 performInitialMount 根据 ReactElement 的类型来创建不同的对象。在渲染普通 DOM 元素的时候,这部会返回 ReactDOMComponent。但渲染自定义组件的时候,就不一样了。
渲染普通 DOM 元素的调用关系如下图所示,自定义组件的渲染调用关系见下文:
使用 App 创建
ReactCompositeComponent[ins]
在 performInitialMount 这步,renderedElement 就是 ReactElement[1]
:
performInitialMount: function (renderedElement, hostParent,
hostContainerInfo, transaction, context) {
...
// 这里会调用 TopLevelWrapper 实例的 render 方法,得到 ReactElement[1]
if (renderedElement === undefined) {
renderedElement = this._renderValidatedComponent();
}
...
// 返回 ReactCompositeComponent[ins]
var child = this._instantiateReactComponent(
renderedElement,
nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */
);
this._renderedComponent = child;
var markup = ReactReconciler.mountComponent(
child,
transaction,
hostParent,
hostContainerInfo,
this._processChildContext(context),
debugID
);
return markup;
},
这步与第二篇的 performInitialMount 很相似,唯一区别就是渲染普通 DOM 元素返回的是ReactDOMComponent
,而渲染自定义组件返回的是包装好的自定义组件ReactCompositeComponent[ins]
。
调用关系如下图所示:
初始化
ReactCompositeComponent[ins]
在 performInitialMount 的后半部分,ReactReconciler.mountComponent 实际上会调用 ReactCompositeComponent[ins] 的 mountComponent。这里的关键代码是
...
// 创建 App 组件的实例
var inst = this._constructComponent(
doConstruct,
publicProps,
publicContext,
updateQueue
);
...
经过这步后,ReactCompositeComponent[ins]._instance 等于 App[ins]。像之前一样,mountComponent 又会调用自身的 performInitialMount:
performInitialMount: function (renderedElement, hostParent,
hostContainerInfo, transaction, context) {
...
// 这里会调用 App 实例的 render 方法,而 render 的返回值是 React.createElement 的嵌套调用。
if (renderedElement === undefined) {
renderedElement = this._renderValidatedComponent();
}
...
// 返回 ReactDOMComponent[6]
var child = this._instantiateReactComponent(
renderedElement,
nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */
);
this._renderedComponent = child;
var markup = ReactReconciler.mountComponent(
child,
transaction,
hostParent,
hostContainerInfo,
this._processChildContext(context),
debugID
);
return markup;
},
React.createElement 的嵌套调用是指:
render() {
return React.createElement( // scr: -----------> 5)
'div',
{ className: 'App' },
React.createElement( // scr: -----------> 3)
'div',
{ className: 'App-header' },
React.createElement( // scr: -----------> 1)
'img',
{ src: "main.jpg", className: 'App-logo', alt: 'logo' }
),
React.createElement( // scr: -----------> 2)
'h1',
null,
' "Welcom to React" '
)
),
React.createElement( // scr: -----------> 4)
'p',
{ className: 'App-intro' },
this.state.desc
)
);
}
这里 React.createElement 的调用顺序是先调用作为参数的 children,再调用父级。调用顺序已在代码中注释。
接下来的 _instantiateReactComponent 会返回ReactDOMComponent
,就触及到真正的 DOM 操作了。先看图,这部分内容将在下回分解~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。