React源碼解析(二):組件的類型與生命週期

在上一篇文章《React源碼解析(一):組件的實現與掛載》中，咱們闡述了React組件的實現和掛載。如今咱們來一塊兒探究組件的生命週期。

咱們已經知道，只有在掛載流程開始後，纔會觸發組件的生命週期，生成ReactElement類型的js對象，經過解析組件對象內部所攜帶的信息，得到對應的HTML信息，插入指定的DOM容器中，最終完成視圖的渲染。那麼組件的生命週期在這一過程當中是如何觸發的呢?

其實研究組件的聲明週期，就是更深刻的研究組件的掛載過程。

組件的生命週期

在上一篇文章的最後，咱們知道ReactDOM.render()方法根據傳入的參數不一樣，在內部經過工廠方法生成四種不一樣類型的封裝組件：

• ReactEmptyComponent
• ReactTextComponent
• ReactDOMComponent
• ReactCompositeComponent

在執行掛載流程時，經過執行每種封裝組件內部的mountComponent方法觸發生命週期，但顯然生命週期只在React自定義組件中存在，也就是ReactCompositeComponent。由於其餘三種組件是不存在生命週期的，因此咱們先來分析下相對容易的不存在生命週期的三種內部組件。

1.ReactEmptyComponent

經過ReactEmptyComponent.create()方法建立，該方法最終調用的是ReactDOMEmptyComponent方法，看下源碼：

由於組件爲空，因此幾乎全部參數設置爲null，也無關生命週期，只有組件的掛載和卸載。在關鍵方法mountComponent中，咱們看到最終返回的是形如<!-->的HTML，也就是空，所以插入真實DOM的也是空。

2.ReactTextComponent

經過ReactHostComponent.createInstanceForText()方法建立，咱們直接看mountComponent便可：

ReactDOMTextComponent相比ReactDOMEmptyComponent的處理稍微複雜一些，可是邏輯大體相同。escapeTextContentForBrowser方法內部對參數進行空格的校驗處理，最終經過簡單的' '+參數方法將參數轉化爲字符串並返回。

3.ReactDOMComponent

經過ReactHostComponent.createInternalComponent()方法建立，一樣咱們直接看mountComponent就好：

由於dom元素一樣沒有生命週期，ReactDOMComponent會對傳入的div,span等標籤經過switch進行識別和處理，除此以外流程與上述兩類組件基本相同。

4.ReactCompositeComponent

自定義組件是React組件的重點，經過ReactCompositeComponentWrapper()方法建立，最終調用ReactCompositeComponentMixin.mountComponent方法建立組件的HTML。因爲該函數很是長，感興趣的讀者請前往ReactCompositeComponent.js閱讀源碼，在此咱們直接用圖例給出該函數的邏輯：

基於以上，能夠看出生命週期的執行的目的就是爲了解析ReactElement得到HTML。由此咱們更新上一篇文章中的四大組件類型的總結表格：

nextElement	實際參數	結果
null/false	空	建立ReactDOMEmptyComponent組件
object && type === string	虛擬DOM	建立ReactDOMComponent組件
object && type !== string	React組件	建立ReactCompositeComponent組件
string	字符串	建立ReactDOMTextComponent組件
number	數字	建立ReactDOMTextComponent組件

最後基於第一篇文末給出的思惟導圖，咱們進行細節完善： (點擊可查看大圖)

回顧：
《React源碼解析(一):組件的實現與掛載》
《React源碼解析(三):詳解事務與更新隊列》
《React源碼解析(四):事件系統》 聯繫郵箱：ssssyoki@foxmail.com