模拟实现React组件初次实例化及渲染(带详细分析)

引言：
用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件事

1. 为顶层ReactElement包一层Wrapper（原因请往下看）
2. 实例化生成ReactCompositeComponentWrapper
3. 实现渲染（这里比较复杂，下面分析）

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);
    }
};

以上的流程基本上是这样的：

1. 编写我们的组件HelloWorld、里面定义了生命周期函数和自定义函数，这时会调用React.createClass
2. 调用React.createClass，因此会先执行getDefaultProps（生命周期getDefaultProps在这一步执行）
3. 将MyComponent作为React.createElement的type参数传入，创建一个ReactElement
4. 将创建的ReactElement和container参数传入，调用ReactDom.render
5. 在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);
    }
}

1. 生成ReactCompositeComponentWrapper之后调用ReactmountComponent方法，第一次进去的时候由于Reactelement.type为TopLevelWrapper，生成一个TopLevelWrapper的实例

2. 生成了TopLevelWrapper的实例，但是这个实例的构造函数并没有componentWillMount方法，进入performInitialMount方法

3. 在performInitialMount方法里，通过TopLevelWrapper定义的render方法，得到我们顶层的ReactElement

4. 得到这个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;
    }
}

最后总结一下总的流程：（建议边看流程边看源码边思考）

1. 编写我们的组件HelloWorld、里面定义了生命周期函数和自定义函数，这时会调用React.createClass

2. 调用React.createClass，因此会先执行getDefaultProps（生命周期getDefaultProps在这一步执行）

3. 将MyComponent作为React.createElement的type参数传入，创建一个ReactElement

4. 将创建的ReactElement和container参数传入，调用ReactDom.render

5. 在ReactDom.render方法里面，首先会把顶层的ReactElement用一层TopLevelWrapper包起来（原因在源码里分析了），然后生成ReactCompositeComponentWrapper

6. 之后调用ReactCompositeComponentWrapper的mountComponent方法，第一次进去的时候由于Reactelement.type为TopLevelWrapper，生成一个TopLevelWrapper的实例

7. 生成了TopLevelWrapper的实例，但是这个实例的构造函数并没有componentWillMount方法，进入performInitialMount方法

8. 在performInitialMount方法里，通过TopLevelWrapper定义的render方法，得到我们顶层的ReactElement

9. 得到这个ReactElement之后把它传进instantiateReactComponent，返回一个ReactCompositeComponentWrapper，ReactCompositeComponentWrapper._element的type就是createCalss的Constructor

10. 这个时候递归回到ReactCompositeComponentWrapper的mountComponent方法，此时this._element.type变成createClass的Constructor，getInitialState就是在实例化constructor的时候执行的，这个Constructor的原型对象增加了我们编写的类的方法（生命周期getInitialState在这一步执行）

11. 此时我们生成的实例已经能访问到componentWillMount方法了，因此执行componentWillMount方法（生命周期componentWillMount在这一步执行）

12. 接着进入performInitialMount方法，通过ReactCompositeComponentWrapper的render方法，也就是我们编写的类MyComponent的render方法，得到底层的ReactElement（生命周期函数render在这一步执行）

13. 这个时候进入instantiateReactComponent就会返回一个ReactDOMComponent实例，我们知道ReactDOMComponent负责真实的渲染，因此页面中渲染出Hello World

14. 之后回到ReactCompositeComponentWrapper的mountComponent继续执行componentDidMount（生命周期componentDidMount在这一步执行）

15. 至此，一个简单的React实例化的生命周期完成

完整代码地址：github地址