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

2023年1月6日 143次阅读 来源: 剡山

接上文，

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

事宜

到現在這一步，組件實例已經由歷程某種體式格局加入到React的生態體系中了，同時，React也會對組件舉行一些處置懲罰，比方ReactUpdates這個特地的模塊。正如人人所知，React是批量處置懲罰更新的，也就是說，React會網絡一切操縱然後一次性操縱掉。採納這類體式格局，一些先置前提和後置前提只須要運轉一次，避免了每次更新時都要運轉的弊病。

那末React是怎樣處置懲罰這些先置和後置前提的呢？答案就是事宜(transaction)。 關於一些人來講這個多是一個新的辭彙，尤其是從UI角度的詮釋。為了更好的詮釋這個，我們先從一個簡樸的案例最先。

假設有個通訊管道，每次通訊前，你都須要先豎立銜接，然後發送數據，末了封閉銜接。假如你有許多信息須要發送，你須要反覆屢次這些步驟，這些步驟都須要許多的開支。然則，所謂的事宜就是你只豎立一次銜接，然後把一切音訊一次性都發送過去，末了封閉銜接即可。

我們在把這個歷程更泛化下，可以把‘發送信息’以為一次你想做的操縱，‘豎立/封閉’銜接對應於實行一次操縱的‘前置/後置‘前提。然後，你可以零丁定義豎立/封閉標誌，然後在任何要領中運用他們（我們可以把這些豎立/封閉標誌稱為包裝器（wrappers），由於每一個包裝器都邑包裝某個行動要領）。

回到React，事宜是React中普遍採納的一種形式。先不管包裝行動，事宜許可運用重置事宜流，壅塞一個已在實行歷程當中的同步要領等等。React中有許多差別的事宜類，每一個類都形貌一種細緻的行動，然則每一個類都是繼續自Transaction模塊。每種事宜對應的鍵值和特定的事宜包裝類是對應的。包裝器就是一個具有initialize要領和close要領的對象。

總之，也許的歷程就是：

  • 挪用每一個包裝器的initialize要領，然後緩存其返回值
  • 挪用事宜要領自身
  • 挪用包裝器的close要領

來看些React中別的運用事宜的場景：

  • 保存輸入框的挑選局限，以便在同步Dom構造之前/今後，實在事宜發送毛病，依舊可以恢復挑選
  • 在重排DOM防備失焦/聚焦時住手事宜，確保重排今後，事宜體系從新激活
  • 在遊覽器的事情線程中發作同步Dom構造后，將網絡到的DOM變化行列刷新到UI襯着主線程上
  • 襯着新內容后，挪用網絡的componentDidUpdaate的回調函數。

相識以上內容后，回到我們一最先的實例代碼。
從流程圖中能看出，React挪用了類ReactDefaultBatchingStrategyTransaction 。就像我們在上面的內容里所說的，一個事宜類的關鍵是它的包裝器。 所以，我們細緻看下包裝器，然後試着找出事宜的準確定義。 兩個包裝器 FLUSH_BATCHED_UPDATES，RESET_BATCHED_UPDATES. 先看下源碼：

//\src\renderers\shared\stack\reconciler\ReactDefaultBatchingStrategy.js#19
var RESET_BATCHED_UPDATES = {
      initialize: emptyFunction,
      close: function() {
        ReactDefaultBatchingStrategy.isBatchingUpdates = false;
      },
};

var FLUSH_BATCHED_UPDATES = {
     initialize: emptyFunction,
     close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),
}

var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];

正如你所見，這個事宜類沒有先置前提。initialize要領是個空要領，但其中有個close要領–ReactUpdates.flushBatchedUpdates卻值得注意。它的作用是，
在今後的從新襯着中最先臟組件的考證歷程。我們挪用掛載要領，並把它包裝進這個事宜中，這是為了在掛載行動后，React會搜檢已掛載組件影響到了哪些內容，並更新這些內容。
再看下遊程圖裡被包裝進事宜的要領，事實上，這個要領會挪用別的一個事宜。。。
（未完待續）

    原文作者：剡山
    原文地址: https://segmentfault.com/a/1190000015416510
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞