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

越山發表於2018-06-29
ReactJS原始碼

接上文，

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元素。
（未完待續）

相關文章