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

antyiwei 發布于2019-08-22 18:23 / 3250人閱讀

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

接上文，

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

掛載

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

掛載一個組件樹的過程大致如下：掛載父親組件，然后掛載它的子組件，然后是子組件的子組件，以此類推。當TopLevelWrapper掛載后，它的子組件（ReactCompositeComponent，負責管理ExampleApplication）也會進入到相同的步驟。

我們回到ReactCompoiteComponent一探究竟。這里面有一些關鍵點需要注意，接下去我們會詳細的討論里面的邏輯。

賦值實例更新器

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

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

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

看下如下代碼：

// 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的方式來讓實例獲取props等屬性了。

創建ExampleApplication實例

在流程圖中，通過調用_constructComponent方法和其他幾個構造方式，一個新的ExampleApplication實例就被創建出來了。我們在組件構造函數里寫的代碼往往也是在這里被調用的。這里，是我們自己寫的代碼第一次真正被React系統調用的地方。

執行初始掛載

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

官方文檔表達了類似的意思

當掛載事件發生前，componentWillMount方法會被立刻調用。它的調用在render方法之前，因此，在這里調用setState不會觸發重新渲染（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);
    }
}

當state重新計算后，我們就會調用render方法了，就是我們在我們自定義組件里定義的render方法。React又一次使用了我們的代碼。

接下去，我們將會創建一個React組件實例，嗯，又創建一次。我們之前已經調用過一次this._instantiateReactComponent了，為什么這里又要調用一次呢？這是因為，前一次的調用，是創建一個ExampleApplication組件對應的ReactCompositeComponent實例，現在，我們則是根據我們組件的render方法中返回的元素，創建子組件對應的虛擬DOM實例。在我們的列子中，render方法返回了一個div，所以，虛擬DOM創建一個ReactDOMComponent的實例。當這個實例創建后，我們會又一次調用ReactReconciler.mountComponent方法，但這次是一個創建內部實例但過程，我們傳遞的是一個ReactDOMComponent的實例。然后，繼續調用它的mountComponent方法。。。
（未完待續）

GPU云服務器云服務器解讀3 源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95798.html

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

摘要：源碼里有個獨立的模塊管理組件的所有子元素。第一個，實例化子元素使用并掛載它們。至于具體掛載流程，基于子元素類型的不同而有不同的掛載過程。掛載的過程基本完成了。接上文， React流程圖：https://bogdan-lyashenko.gith... 創建初始子組件在之前的步驟里，組件本身的構建已經完成，接下去，我們分析它們的子元素。總共分為兩步：掛載子元素（this.mountC...

codergarden 2019-08-22 18:24 評論0 收藏0
【Under-the-hood-ReactJS-Part9】React源碼解讀

摘要：當鼠標事件發生時，組件的最外層會進行處理，然后通過幾層包裝器的處理后，會開始進行批量更新操作。在這之后，會將這些事件處理成常見到樣子。接上文， React流程圖：https://bogdan-lyashenko.gith... 回到最初在流程圖中，也許你已經注意到，setState方法可以通過幾種方式觸發，更準確的說，可以分為是否由外部引起的（也就是是否由用戶觸發）。讓我們看下如下...

SnaiLiu 2019-08-22 18:29 評論0 收藏0
【Under-the-hood-ReactJS-Part11】React源碼解讀

摘要：技術上來說，當方法被調用后或者發生改變后，方法都會被調用。下一步，會設置為。之后，檢測當前更新是否由更新引起的。這是因為，使用是導致組件持久化更新，而會被方法的返回值重新賦值。接上文， React流程圖：https://bogdan-lyashenko.gith... 更新組件關于組件的更新，我們先看下代碼里的注釋：對于已掛載組件的更新過程，React會首先調用component...

hiyayiji 2019-08-22 18:30 評論0 收藏0
【Under-the-hood-ReactJS-Part8】React源碼解讀

摘要：接上文，流程圖我們已經知道掛載的工作流程，現在我們換個方向研究下方法，這個也是的重要組成部分。這個問題，我們會在下一篇文章中進行解答。。。接上文， React流程圖：https://bogdan-lyashenko.gith... this.setState 我們已經知道掛載的工作流程，現在我們換個方向研究下--setState方法，這個也是React的重要組成部分。首先，為什么我...

zhoutk 2019-08-22 18:25 評論0 收藏0
【Under-the-hood-ReactJS-Part13】React源碼解讀

摘要：接著，將返回的元素和之前的進行比較的，以驗證是否真的需要更新。我們看下代碼，代碼比較簡單好，對應于我們的這個列子，我們對于方法的更改并不會對方法造成影響。所以我們進入下一步，也就是對于節點的更新。接上文， React流程圖：https://bogdan-lyashenko.gith... 如果組件真的需要更新在組件剛開始更新過程時，如果有定義componentWillUpdate方...

jerryloveemily 2019-08-22 18:32 評論0 收藏0
【Under-the-hood-ReactJS-Part4】React源碼解讀

摘要：接上文，流程圖子組件掛載我們繼續探究方法。對于我們的實例代碼而言，就是標簽，所以沒有額外的處理過程。屬性驗證緊接著的被調用的驗證方法用于確保被正確設置，否則，會拋出異常。接上文， React流程圖：https://bogdan-lyashenko.gith... 子組件掛載我們繼續探究mount方法。如果渲染的標簽里有復雜的html標簽，如video，form，textarea等...

evin2016 2019-08-22 18:23 評論0 收藏0