【Under-the-hood-ReactJS-Part6】React原始碼解讀

越山發表於2018-06-30

接上文,

React流程圖:
https://bogdan-lyashenko.gith…

建立初始子元件

在之前的步驟裡,元件本身的構建已經完成,接下去,我們分析它們的子元素。總共分為兩步:掛載子元素(this.mountChildren)和連結子元素到其父元件(DOMLazyTree.queueChild)。我們先進行子元素掛載的分析。

React原始碼裡有個獨立的模組ReactMultiChild(srcrendererssharedstackreconcilerReactMultiChild.js)管理元件的所有子元素。我們先看下mountChildren方法,它包含兩個主任務。第一個,例項化子元素(使用ReactChildReconciler)並掛載它們。那麼子元素有哪些型別呢?可以是HTML標籤,也可以是其他自定義元件。對於HTML元素,我們需要例項化ReactDOMComponent,對於自定義元件,則是ReactCompositeComponent。至於具體掛載流程,基於子元素型別的不同而有不同的掛載過程。

回顧流程

到這裡,是時候回顧下整個掛載的流程了。我們稍作休息,然後整理下整個流程中需要使用的物件。大概過程如下:
1)React例項ReactCompositeComponent來操作每個自定義元件(期間會有元件生命週期方法的執行,如componentWillMount)並且掛載它們。
2)在初次掛載期間,自定義元件的例項將會被建立(constructor方法會被呼叫)
3)之後,元件的render方法會被呼叫(比如一個簡單元件會返回一個div),然後通過ReactcreateElement方法,建立一個React元素。這些React元素會被直接或者在通過Babel轉化jsx後用於替換render方法中的標籤。這裡的描述可能還不是很具體,我們看下一步。
4)對於div標籤,我們需要一個DOM元件。所有在例項化的過程中,我們會通過元素物件(上一步建立的物件)來建立ReactDOMComponent的例項。
5)之後,我們需要將DOM元件掛載到DOM文件中,也就是說這裡我們需要真正的建立DOM元素,並且新增事件監聽器等等。
6)接著,我們繼續處理DOM元素的子元素。按之前的步驟建立例項並掛載它們,根據子元素的型別,自定義元件還是html標籤,來決定呼叫步驟1還是步驟5.直到遞迴完所有的內嵌元素。

整個過程就是如此,像你看到的一樣簡潔明瞭。
掛載的過程基本完成了。我們將componentDidMount方法入棧。

(未完待續)

相關文章