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

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

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

接上文，

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

掛載

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

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

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

賦值實(shí)例更新器

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

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

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

看下如下代碼：

// 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;

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

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

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

執(zhí)行初始掛載

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

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

當(dāng)掛載事件發(fā)生前，componentWillMount方法會(huì)被立刻調(diào)用。它的調(diào)用在render方法之前，因此，在這里調(diào)用setState不會(huì)觸發(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ì)算后，我們就會(huì)調(diào)用render方法了，就是我們?cè)谖覀冏远x組件里定義的render方法。React又一次使用了我們的代碼。

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