react 渲染原理

  总体概括：

• JSX代码经过babel编译之后变成React.createElement的表达式，这个表达式在render函数被调用的时候执行生成一个element。
• 在首次渲染的时候，先去按照规则初始化element，接着ReactComponentWrapper通过递归，最终调用ReactDOMComponent的mountComponent方法来帮助生成真实DOM节点。

  详细解说：

  

一、JSX如何生成element

这里是一段写在render里的jsx代码。

return (
    <div className="cn">
         <Header> Hello, This is React </Header>
         <div>Start to learn right now!</div>
         Right Reserve.
    </div>
)

 

首先，它会经过babel编译成React.createElement的表达式。

return (
    React.createElement(
        'div',
        { className: 'cn' },
        React.createElement(
            Header,
            null,
            'Hello, This is React'
        ),
        React.createElement(
            'div',
            null,
            'Start to learn right now!'
        ),
        'Right Reserve'
    )
)

这个React.createElement的表达式会在render函数被调用的时候执行，换句话说，当render函数被调用的时候，会返回一个element。二、element如何生成真实节点

 

二、element如何生成真实节点

顺利得到element之后，我们再来看看React是如何把element转化成真实DOM节点的。

首先，需要去初始化element,初始化的规则如下：

以第一条为例：先判断是否为Object类型，是的话，看它的type是否是原生DOM标签，是的话，给它创建ReactDOMComponent的实例对象，其他同理。

 

这时候有的人可能会有所疑问：这些个ReactDOMComponent, ReactCompositeComponentWrapper怎么开发的时候都没有见过？

其实这些都是React的私有类，React自己使用，不会暴露给用户的。它们的常用方法有：mountComponent,updateComponent等。其中mountComponent 用于创建组件，而updateComponent用于用户更新组件。

而我们自定义组件的生命周期函数以及render函数都是在这些私有类的方法里被调用的。