引言：
用React有一段时间了，一个东西当你觉得用熟了以后，就会想弄明白他的内部机理。最近一直在看React源码（15.6.3版本），想搞明白一个React组件从创建到渲染经历了哪些过程，生命周期函数对应在哪执行，以及创建后一旦状态发生改变，React又是怎样去比较、所谓的diff是如何执行从而完成更新的，为什么说他高效，和vue的diff又有哪些不同。
刚开始心很大，想直接看diff部分，然后发现。。简直一片汪洋大海。最后，还是从头开始看从一个组件最初实例化渲染，一步一步，才能慢慢搞明白。查阅了好多资料，理解了好长时间，自己弄明白一些，看别的文章理解一些，最后看到一片外国小哥的文章，他写了教程，阐述一个小型React框架如何实现，我也是看了他的代码，才解决了许多疑问。
基于我的理解，跟React源码以及外国小哥的实现，有了这篇文章。
1、createElement、createClass实现
我们编写好我们的组件类
class HelloWorld extends Component {
static defaultProps = {
props: 'props'
}
constructor(props) {
super(props);
this.state = {
state: 'state'
}
}
componentWillMount() {
console.log('componentWillMount')
}
componentDidMount() {
console.log('componentDidMount')
}
render() {
return (
<h1>
Hello World
</h1>
);
}
}
执行渲染函数就会在页面中渲染
ReactDOM.render(
<HelloWorld />,
document.getElementById('root')
);
这里之所以能<HeLLoWorld />，其实是因为JSX的功劳，关于JSX如果你不太清楚，看一看这里JSX介绍。
这里我们当然不会去实现一个JSX语法解析器，这不是本文的重点。我们分析他解析后的样子。
ReactDOM.render(
React.createElement(HelloWorld),
document.getElementById('root')
);
HelloWorld是我们编写的类，习惯上我们常用es6的写法，上面我们常写的class HelloWorld extends Component {}这样写实际上是会调用createClass，如下：
const HelloWorld = React.createClass({
getDefaultProps() {
console.log('getDefaultProps')
return {
props: 'props'
}
},
getInitialState() {
console.log('getInitialState')
this.state = {
state: 'state'
}
},
componentWillMount() {
console.log('componentWillMount');
},
componentDidMount() {
console.log('componentDidMount');
},
render() {
return React.createElement('h1', null, 'Hello World');
}
});
因此我们首先实现React.createClass和React.createElement：
const React = {
createElement(type, props, children) {
const element = {
type,
props: props || {}
};
if (children) {
element.props.children = children;
}
return element;
},
createClass(spec) {
function Constructor(props) {
this.props = props;
if (this.getInitialState) {
this.getInitialState()
}
}
// 构造函数的原型对象增加我们createClass时定义的方法
Constructor.prototype = Object.assign(Constructor.prototype, spec);
if (spec.getDefaultProps) {
Constructor.defaultProps = spec.getDefaultProps();
}
// 返回构造函数
return Constructor;
},
};
接下来我们就得看ReactDom.render函数了，这个函数做3件事
- 为顶层ReactElement包一层Wrapper（原因请往下看）
- 实例化生成ReactCompositeComponentWrapper
- 实现渲染（这里比较复杂，下面分析）
ReactDom.render:
const ReactDom = {
render(element, container) {
// 终于搞明白这里为什么要把element再包一层了，
// 在ReactCompositeComponentWrapper的performInitialMount方法里，
// 我们取得renderedElement是通过组件的render()得来的，
// 而最顶层的ReactElement不是通过render()得来的，因此我们只能给他包一层TopLevelWrapper
const wrapperElement = React.createElement(TopLevelWrapper, element);
const componentInstance = new ReactCompositeComponentWrapper(wrapperElement);
return ReactReconciler.mountComponent(componentInstance, container);
}
}
TopLevelWrapper的实现：
const TopLevelWrapper = function(props) {
this.props = props;
};
TopLevelWrapper.prototype.render = function() {
return this.props;
};
ReactReconciler:
const ReactReconciler = {
mountComponent(internalInstance, container) {
return internalInstance.mountComponent(container);
}
};
以上的流程基本上是这样的：
- 编写我们的组件
HelloWorld、里面定义了生命周期函数和自定义函数，这时会调用React.createClass - 调用
React.createClass，因此会先执行getDefaultProps（生命周期getDefaultProps在这一步执行） - 将
MyComponent作为React.createElement的type参数传入，创建一个ReactElement - 将创建的
ReactElement和container参数传入，调用ReactDom.render - 在
ReactDom.render方法里面，首先会把顶层的ReactElement用一层TopLevelWrapper包起来（原因在源码里分析了），然后生成ReactCompositeComponentWrapper
ReactCompositeComponentWrapper：
class ReactCompositeComponentWrapper {
constructor(element) {
this._element = element;
}
mountComponent(container) {
// 第一次this._element.type == TopLevelWrapper
// 第二次this._element.type == createClass的Constructor函数
const Component = this._element.type;
const componentInstance = new Component(this._element.props);
this._instance = componentInstance;
if (componentInstance.componentWillMount) {
componentInstance.componentWillMount();
}
const markup = this.performInitialMount(container);
if (componentInstance.componentDidMount) {
componentInstance.componentDidMount();
}
return markup;
}
performInitialMount(container) {
// render()返回的就是props对象，我们知道ReactElement曾经被wrapperElement当作props包起来
const renderedElement = this._instance.render();
// 根据ReactElement的type的不同实例化
const child = instantiateReactComponent(renderedElement);
console.log(child)
this._renderedComponent = child;
// 这里其实是会递归调用，实例化了父组件，还要接着实例化子组件
return ReactReconciler.mountComponent(child, container);
}
}
-
生成
ReactCompositeComponentWrapper之后调用ReactmountComponent方法，第一次进去的时候由于Reactelement.type为TopLevelWrapper，生成一个TopLevelWrapper的实例 -
生成了
TopLevelWrapper的实例，但是这个实例的构造函数并没有componentWillMount方法，进入performInitialMount方法 -
在
performInitialMount方法里，通过TopLevelWrapper定义的render方法，得到我们顶层的ReactElement -
得到这个
ReactElement之后把它传进instantiateReactComponent，返回一个ReactCompositeComponentWrapper，ReactCompositeComponentWrapper._element的type就是createCalss的Constructor
instantiateReactComponent：
function instantiateReactComponent(element) {
if (typeof element.type === 'string') {
return new ReactDOMComponent(element);
} else if (typeof element.type === 'function') {
return new ReactCompositeComponentWrapper(element);
}
}
ReactDOMComponent
/**
* ReactDOMComponent类
* 用于渲染成真实dom
*/
class ReactDOMComponent {
constructor(element) {
this._element = element;
}
mountComponent(container) {
const domElement = document.createElement(this._element.type);
const textNode = document.createTextNode(this._element.props.children);
domElement.appendChild(textNode);
container.appendChild(domElement);
this._hostNode = domElement;
return domElement;
}
}
最后总结一下总的流程：（建议边看流程边看源码边思考）
-
编写我们的组件
HelloWorld、里面定义了生命周期函数和自定义函数，这时会调用React.createClass -
调用
React.createClass，因此会先执行getDefaultProps（生命周期getDefaultProps在这一步执行） -
将
MyComponent作为React.createElement的type参数传入，创建一个ReactElement -
将创建的
ReactElement和container参数传入，调用ReactDom.render -
在
ReactDom.render方法里面，首先会把顶层的ReactElement用一层TopLevelWrapper包起来（原因在源码里分析了），然后生成ReactCompositeComponentWrapper -
之后调用
ReactCompositeComponentWrapper的mountComponent方法，第一次进去的时候由于Reactelement.type为TopLevelWrapper，生成一个TopLevelWrapper的实例 -
生成了
TopLevelWrapper的实例，但是这个实例的构造函数并没有componentWillMount方法，进入performInitialMount方法 -
在
performInitialMount方法里，通过TopLevelWrapper定义的render方法，得到我们顶层的ReactElement -
得到这个
ReactElement之后把它传进instantiateReactComponent，返回一个ReactCompositeComponentWrapper，ReactCompositeComponentWrapper._element的type就是createCalss的Constructor -
这个时候递归回到
ReactCompositeComponentWrapper的mountComponent方法，此时this._element.type变成createClass的Constructor，getInitialState就是在实例化constructor的时候执行的，这个Constructor的原型对象增加了我们编写的类的方法（生命周期getInitialState在这一步执行） -
此时我们生成的实例已经能访问到
componentWillMount方法了，因此执行componentWillMount方法（生命周期componentWillMount在这一步执行） -
接着进入
performInitialMount方法，通过ReactCompositeComponentWrapper的render方法，也就是我们编写的类MyComponent的render方法，得到底层的ReactElement（生命周期函数render在这一步执行） -
这个时候进入
instantiateReactComponent就会返回一个ReactDOMComponent实例，我们知道ReactDOMComponent负责真实的渲染，因此页面中渲染出Hello World -
之后回到
ReactCompositeComponentWrapper的mountComponent继续执行componentDidMount（生命周期componentDidMount在这一步执行） -
至此，一个简单的React实例化的生命周期完成
完整代码地址：github地址
网友评论