【Under-the-hood-ReactJS-Part3】React源碼解讀

antyiwei 發(fā)布于2019-08-22 18:23 / 3256人閱讀

摘要：接上文，流程圖掛載是我們重點(diǎn)關(guān)注對象之一。賦值實(shí)例更新器流程圖中返回的對象，其實(shí)就是模塊。目前我們并不會使用，但是我們必須了解的是，非常非常重要，大名鼎鼎的方法就會使用到這個。這個方法是我們目前碰到的第一個生命周期事件鉤子。

接上文，

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

掛載

componentMount是我們重點(diǎn)關(guān)注對象之一。這個方法最重要的部分就是ReactCompositeComponent.mountComponent.
如果你還有印象，我提到過第一個被壓入到組件樹里的組件是TopLevelWrapper（React內(nèi)部類）。在mountComponent中，我們將掛載它。
但是，這個內(nèi)部類是一個空的包裝類。對于調(diào)試來說毫無意義，它完全不影響流程。所以，我們暫且跳過它，先對它的子組件進(jìn)行研究。

掛載一個組件樹的過程大致如下：掛載父親組件，然后掛載它的子組件，然后是子組件的子組件，以此類推。當(dāng)TopLevelWrapper掛載后，它的子組件（ReactCompositeComponent，負(fù)責(zé)管理ExampleApplication）也會進(jìn)入到相同的步驟。

我們回到ReactCompoiteComponent一探究竟。這里面有一些關(guān)鍵點(diǎn)需要注意，接下去我們會詳細(xì)的討論里面的邏輯。

賦值實(shí)例更新器

流程圖中 transaction.getUpdateQueue()返回的對象updateQueue，其實(shí)就是ReactUpdateQueue模塊。那么會為什么在這里要賦值updateQueue呢？這是因?yàn)镽eactCompositeComponent（我們正在研究的類）是各個平臺都需要使用的，但是updateQueue則在不同平臺有不同實(shí)現(xiàn)，所以需要我們動態(tài)的在掛載過程中根據(jù)不同的平臺賦予不同的值。

目前我們并不會使用updateQueue，但是我們必須了解的是，updateQueue非常非常重要，大名鼎鼎的setState方法就會使用到這個updateQueue。

在這個階段，除了對updateQueue的賦值，還會有組件實(shí)例（自定義組件）被props，context，refs擴(kuò)展的過程。

看下如下代碼：

// src
endererssharedstack
econcilerReactCompositeComponent.js#255
// These should be set up in the constructor, but as a convenience for
// simpler class abstractions, we set them up after the fact.
inst.props = publicProps;
inst.context = publicContext;
inst.refs = emptyObject;
inst.updater = updateQueue;

這個步驟之后，就可以通過類似this.props的方式來讓實(shí)例獲取props等屬性了。

創(chuàng)建ExampleApplication實(shí)例

在流程圖中，通過調(diào)用_constructComponent方法和其他幾個構(gòu)造方式，一個新的ExampleApplication實(shí)例就被創(chuàng)建出來了。我們在組件構(gòu)造函數(shù)里寫的代碼往往也是在這里被調(diào)用的。這里，是我們自己寫的代碼第一次真正被React系統(tǒng)調(diào)用的地方。

執(zhí)行初始掛載

現(xiàn)在我們開始掛載過程，第一件事就是調(diào)用componentWillMount（前提當(dāng)然是如果有組件代碼里有指定）。這個方法是我們目前碰到的第一個生命周期事件鉤子。當(dāng)然，在后面你也會看到componentDidMount方法。在這里，我們并不直接執(zhí)行它們，我們只是將它們押入到事務(wù)隊(duì)列里。它們的真正的執(zhí)行在非常后面，是在掛載操作完成之后才執(zhí)行的。你可以在componentWillMount里調(diào)用setState方法，然后state會重新計(jì)算，但是render方法并不會被調(diào)用（如果在這里調(diào)用render方法是毫無意義的，因?yàn)榻M件都沒掛載到DOM樹上呢）

官方文檔表達(dá)了類似的意思

當(dāng)掛載事件發(fā)生前，componentWillMount方法會被立刻調(diào)用。它的調(diào)用在render方法之前，因此，在這里調(diào)用setState不會觸發(fā)重新渲染（componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-rendering.）

看下源碼里是怎么做的

// src
endererssharedstack
econcilerReactCompositeComponent.js#476
if (inst.componentWillMount) {
    //..
    inst.componentWillMount();

    // When mounting, calls to `setState` by `componentWillMount` will set
    // `this._pendingStateQueue` without triggering a re-render.
    if (this._pendingStateQueue) {
        inst.state = this._processPendingState(inst.props, inst.context);
    }
}

當(dāng)state重新計(jì)算后，我們就會調(diào)用render方法了，就是我們在我們自定義組件里定義的render方法。React又一次使用了我們的代碼。

接下去，我們將會創(chuàng)建一個React組件實(shí)例，嗯，又創(chuàng)建一次。我們之前已經(jīng)調(diào)用過一次this._instantiateReactComponent了，為什么這里又要調(diào)用一次呢？這是因?yàn)椋耙淮蔚恼{(diào)用，是創(chuàng)建一個ExampleApplication組件對應(yīng)的ReactCompositeComponent實(shí)例，現(xiàn)在，我們則是根據(jù)我們組件的render方法中返回的元素，創(chuàng)建子組件對應(yīng)的虛擬DOM實(shí)例。在我們的列子中，render方法返回了一個div，所以，虛擬DOM創(chuàng)建一個ReactDOMComponent的實(shí)例。當(dāng)這個實(shí)例創(chuàng)建后，我們會又一次調(diào)用ReactReconciler.mountComponent方法，但這次是一個創(chuàng)建內(nèi)部實(shí)例但過程，我們傳遞的是一個ReactDOMComponent的實(shí)例。然后，繼續(xù)調(diào)用它的mountComponent方法。。。
（未完待續(xù)）