国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

MartinHan / 700人閱讀

摘要:接上文,流程圖另外一個事務類這次,我們將分析。在不同的平臺,掛載的過程是不一樣的,所以,主模塊會和進行交互,而則清楚下一步的工作。它會執行組件的初始化,渲染標記并注冊事件監聽器。執行掛載方法后,我們就會得到將插入的真正的元素。

接上文,

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

另外一個事務類

這次,我們將分析ReactReconcileTransaction。正如之前的文章里所講,我們關注的重點是事務包裝器,ReactReconcileTransaction中有三個包裝器:

//src
enderersdomclientReactReconcileTransaction.js#89
var TRANSACTION_WRAPPERS = [
  SELECTION_RESTORATION,
  EVENT_SUPPRESSION,
  ON_DOM_READY_QUEUEING,
];

從流程圖中能看出,這些包裝器的主要用途是用來保存當前DOM的實際狀態,在方法被調用前鎖定一些變化值,然后方法調用后重置這些值。React就是通過事務確保達到這些目標,比如,通過執行事務(在事務開始時獲取選擇的內容然后在結束時恢復選擇的內容)來確保選擇內容不受干擾(input輸入框中的被選中內容),同時,ReactReconcileTransaction也會阻止那些由外層DOM操作(比如暫時性的將input中內容移除)引發的事件(失焦/聚焦),為了達到這個目的,它會在事務開始時關閉ReactBrowserEventEmitter,然后在關閉時重新開啟。

現在,我們快到組件的掛載開始階段了,在這個階段,會返回將插入到DOM的標簽文本。其實,ReactReconciler.mountComponent只是一個包裝器,或者更準確的說,是一個中介,它把掛載方法委托給組件模塊。這里有個關鍵點:

在實現一些平臺相關的邏輯時,ReactReconciler模塊將會被調用。在不同的平臺,掛載的過程是不一樣的,所以,主模塊會和ReactReconciler進行交互,而ReactReconciler則清楚下一步的工作。

現在我們就回到了組件方法 mountComponent。 這個方法你很可能已經見過了。它會執行組件的初始化,渲染html標記并注冊事件監聽器。經過一段長長的調用,我們終于看到了組件掛載方法被調用。執行掛載方法后,我們就會得到將插入DOM的真正的HTML元素。
(未完待續)

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

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

相關文章

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

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

    codergarden 評論0 收藏0
  • Under-the-hood-ReactJS-Part9】React源碼解讀

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

    SnaiLiu 評論0 收藏0
  • Under-the-hood-ReactJS-Part11】React源碼解讀

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

    hiyayiji 評論0 收藏0
  • Under-the-hood-ReactJS-Part8】React源碼解讀

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

    zhoutk 評論0 收藏0
  • Under-the-hood-ReactJS-Part13】React源碼解讀

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

    jerryloveemily 評論0 收藏0

發表評論

0條評論

MartinHan

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<