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函數都是在這些私有類的方法里被調用的。