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

AndroidTraveler 發(fā)布于2019-08-22 18:23 / 1403人閱讀

摘要：下面是源碼里的注釋發(fā)現(xiàn)屬性差異后進(jìn)行合并，并且在需要時(shí)進(jìn)行更新。在這里會(huì)進(jìn)行兩次循環(huán)。注意，在整個(gè)應(yīng)用的運(yùn)行過(guò)程中，所有的事件都是通過(guò)名為合成事件的東西進(jìn)行傳遞的。它包含了一個(gè)名為的對(duì)象進(jìn)行監(jiān)聽(tīng)器的緩存和光臨。

接上文，

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

更新DOM屬性

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

發(fā)現(xiàn)屬性差異后進(jìn)行合并，并且在需要時(shí)進(jìn)行DOM更新。這個(gè)方法很可能是性能優(yōu)化的路徑上的最關(guān)鍵的單一方法。（“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.”）

在這里會(huì)進(jìn)行兩次循環(huán)。第一次，遍歷上一次的props，然后再遍歷下一次的props。
在我們的案例中，掛載時(shí)，lastProps（上一次的屬性）是空值（因?yàn)檫@是我們第一次進(jìn)行賦值），不過(guò)，我們還是可以看看里面發(fā)生了什么

循環(huán)前props

在這個(gè)循環(huán)的第一步中，我們會(huì)檢查nextProps是否包含相同的屬性值。如果有的話，對(duì)于這些屬性值我們會(huì)先跳過(guò)，因?yàn)樗鼈儠?huì)在之后的nextprops循環(huán)中被處理掉。然后，我們會(huì)重置樣式，刪除事件監(jiān)聽(tīng)器（如果之前有設(shè)置的話），移除DOM屬性和DOM屬性值。對(duì)于屬性的處理，我們需要確保它們不是RESERVED_PROPS中的保留關(guān)鍵字，那些是真正的組件屬性，如children，dangerouslySetInnerHTML。

循環(huán)后props

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

注意，在整個(gè)React應(yīng)用的運(yùn)行過(guò)程中，所有的事件都是通過(guò)名為合成事件（synthetic events）的東西進(jìn)行傳遞的。所謂的合成事件，就是為了更高效的使React工作而組裝的一些包裝器。而管理事件的中介模塊就是就是EventPuginHub（srcrendererssharedstackeventEventPluginHub.js）。它包含了一個(gè)名為listenerBank的map對(duì)象進(jìn)行監(jiān)聽(tīng)器的緩存和光臨。我們需要把我們的事件監(jiān)聽(tīng)器加入其中，不過(guò)不是現(xiàn)在，而是在組件和DOM元素已經(jīng)準(zhǔn)備好處理事件的時(shí)候。在這里，看起來(lái)好像我們延遲了事件的執(zhí)行，你可以會(huì)問(wèn)，我們?nèi)绾潍@知事件發(fā)生的那一刻呢？不知道你是否還記得我們會(huì)在所有的方法調(diào)用里傳遞transaction這個(gè)事務(wù)對(duì)象，之所以這樣做，就是為了讓我們能夠更方便的處理這種上面疑問(wèn)的場(chǎng)景，看下代碼：

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

在處理完事件監(jiān)聽(tīng)器后，我們需要設(shè)置DOM屬性和屬性值。就像上面說(shuō)的那樣，我們需要確保這些屬性不是RESEVED_PROPS的保留關(guān)鍵字，那些是真正的組件屬性，如children和djangerouslySetInnerHTML。

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

現(xiàn)在，我們已經(jīng)完成對(duì)屬性更新的過(guò)程的分析，我們可以繼續(xù)下一步了。
（未完待續(xù)）