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

AndroidTraveler 發布于2019-08-22 18:23 / 1399人閱讀

摘要：下面是源碼里的注釋發現屬性差異后進行合并，并且在需要時進行更新。在這里會進行兩次循環。注意，在整個應用的運行過程中，所有的事件都是通過名為合成事件的東西進行傳遞的。它包含了一個名為的對象進行監聽器的緩存和光臨。

接上文，

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

更新DOM屬性

在更新DOM屬性這一步，主要的目標就是將之前的props和當前props的差異高效的更新到DOM上。下面是源碼里的注釋：

發現屬性差異后進行合并，并且在需要時進行DOM更新。這個方法很可能是性能優化的路徑上的最關鍵的單一方法。（“Reconciles the properties by detecting differences in property values and updating the DOM as necessary. This function is probably the single most critical path for performance optimization.”）

在這里會進行兩次循環。第一次，遍歷上一次的props，然后再遍歷下一次的props。
在我們的案例中，掛載時，lastProps（上一次的屬性）是空值（因為這是我們第一次進行賦值），不過，我們還是可以看看里面發生了什么

循環前props

在這個循環的第一步中，我們會檢查nextProps是否包含相同的屬性值。如果有的話，對于這些屬性值我們會先跳過，因為它們會在之后的nextprops循環中被處理掉。然后，我們會重置樣式，刪除事件監聽器（如果之前有設置的話），移除DOM屬性和DOM屬性值。對于屬性的處理，我們需要確保它們不是RESERVED_PROPS中的保留關鍵字，那些是真正的組件屬性，如children，dangerouslySetInnerHTML。

循環后props

在這個循環的第一步中，首先需要檢查prop是否改變了，也就是檢查屬性的下一個值是否和之前的不同。如果是相同的話，則什么都不需要做。對于樣式（你應該發現對于樣式的處理有些特殊），如果根lastProp相比有變化的，React會更新其值。然后，添加會事件監聽器（就像onClick等等）。下面，我們進一步的進行分析。

注意，在整個React應用的運行過程中，所有的事件都是通過名為合成事件（synthetic events）的東西進行傳遞的。所謂的合成事件，就是為了更高效的使React工作而組裝的一些包裝器。而管理事件的中介模塊就是就是EventPuginHub（srcrendererssharedstackeventEventPluginHub.js）。它包含了一個名為listenerBank的map對象進行監聽器的緩存和光臨。我們需要把我們的事件監聽器加入其中，不過不是現在，而是在組件和DOM元素已經準備好處理事件的時候。在這里，看起來好像我們延遲了事件的執行，你可以會問，我們如何獲知事件發生的那一刻呢？不知道你是否還記得我們會在所有的方法調用里傳遞transaction這個事務對象，之所以這樣做，就是為了讓我們能夠更方便的處理這種上面疑問的場景，看下代碼：

//src
enderersdomsharedReactDOMComponent.js#222
transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener,
});

在處理完事件監聽器后，我們需要設置DOM屬性和屬性值。就像上面說的那樣，我們需要確保這些屬性不是RESEVED_PROPS的保留關鍵字，那些是真正的組件屬性，如children和djangerouslySetInnerHTML。

在處理屬性的前后差異過程中，我們會計算出styleUpdates的配置，然后把它傳遞給CSSPropertyOperations模塊。

現在，我們已經完成對屬性更新的過程的分析，我們可以繼續下一步了。
（未完待續）

GPU云服務器云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95808.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-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-Part9】React源碼解讀

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

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

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

jerryloveemily 2019-08-22 18:32 評論0 收藏0