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

molyzzx 發(fā)布于2019-08-22 18:31 / 3449人閱讀

摘要：一種是子元素仍然是復(fù)雜對(duì)象，也就是說子元素還是組件，需要遞歸處理嵌套的子組件直到到達(dá)他們的內(nèi)容層級(jí)。處理方式是根據(jù)的類型來判斷的。在我們的列子中，組件組件有三個(gè)子元素，，和。現(xiàn)在我們要對(duì)元素內(nèi)容進(jìn)行更新，事實(shí)上，是替換它的內(nèi)容。

接上文，

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

最后的最后

更新方法基于子元素上的多個(gè)屬性去處理子元素。這里會(huì)有幾種場(chǎng)景，但是技術(shù)上來說主要是兩種。一種是子元素仍然是‘復(fù)雜’對(duì)象，也就是說子元素還是React組件，React需要遞歸處理嵌套的子組件直到到達(dá)他們的內(nèi)容層級(jí)。還有一種，就是子元素已經(jīng)是內(nèi)容層級(jí)里，內(nèi)容就是字符串或者數(shù)字或者其他簡單類型。

處理方式是根據(jù)nextProps.children的類型來判斷的。在我們的列子中，組件
組件有三個(gè)子元素，button，childCmp 和 text string。

我們看下它是如何運(yùn)作的。
在Examplication子元素的第一次迭代期間，子元素的類型不是內(nèi)容，所以需要進(jìn)入到‘復(fù)雜’組件的處理邏輯。我們遍歷所有的子元素，按之前處理它們父元素的過了處理它們。順便提下，驗(yàn)證shouldUpdateReactComponent的代碼塊會(huì)令人有點(diǎn)疑惑，表面上看起來這個(gè)是用來檢測(cè)是否需要更新，但是實(shí)際上，它除了檢測(cè)更新，還檢測(cè)刪除，新建操作（為了簡化流程圖，相應(yīng)的代碼沒有展示在流程圖中）。之后，我們將舊元素和當(dāng)前元素，如果一些子元素被移除了，則我們需要卸載對(duì)應(yīng)的組件并同時(shí)移除它。

接下去，在第二次迭代過程中，我們需要處理button，這個(gè)相對(duì)來說比較簡單，因?yàn)閎utton的子元素就是文本，內(nèi)容就是‘set state button"。我們檢測(cè)下之前的內(nèi)容是否跟現(xiàn)在的保持一致，嗯，文本沒有發(fā)生改變，所以我們不需要更新button。邏輯上來說這樣很正確，其實(shí)這就是虛擬DOM的作用，現(xiàn)在虛擬DOM聽起來就具體了些，是不是？React會(huì)維護(hù)內(nèi)部DOM，同時(shí)只在需要時(shí)才去處理真正的DOM節(jié)點(diǎn)，通過這種方式，很自然的會(huì)提高性能。到這里，你應(yīng)該已經(jīng)能理解React的設(shè)計(jì)思想了，這之后，我們對(duì)ChildCmp進(jìn)行更新，它的子元素會(huì)被遍歷直到它的內(nèi)容層級(jí)并進(jìn)行更新。在我們的列子里，通過click和setState的調(diào)用，"click state message"會(huì)對(duì)this.props.message進(jìn)行更新。

//...
onClickHandler() {
    this.setState({ message: "click state message" });
}

render() {
    return 
        
        
//...

現(xiàn)在我們要對(duì)元素內(nèi)容進(jìn)行更新，事實(shí)上，是替換它的內(nèi)容。那么是如何進(jìn)行更新的呢？一個(gè)類似擁有配置信息的配置對(duì)象會(huì)被解析，并且配置對(duì)象里的定義的動(dòng)作會(huì)被執(zhí)行。對(duì)應(yīng)我們的例子，文本更新的配置會(huì)像如下：

{
  afterNode: null,
  content: "click state message",
  fromIndex: null,
  fromNode: null,
  toIndex: null,
  type: "TEXT_CONTENT"
}

正如你所見，它幾乎就是一個(gè)空對(duì)象，這個(gè)文本內(nèi)容更新例子是相當(dāng)直白的。配置對(duì)象里有很多字段，這是因?yàn)樵趯?duì)DOM節(jié)點(diǎn)進(jìn)行移動(dòng)時(shí)，配置對(duì)象會(huì)比文本更新的配置對(duì)象相對(duì)來說會(huì)更復(fù)雜些：

看下源碼，這應(yīng)該會(huì)讓我們有個(gè)更清晰的認(rèn)識(shí)：

//src
enderersdomclientutilsDOMChildrenOperations.js#172
processUpdates: function(parentNode, updates) {
    for (var k = 0; k < updates.length; k++) {
      var update = updates[k];

      switch (update.type) {
        case "INSERT_MARKUP":
          insertLazyTreeChildAt(
            parentNode,
            update.content,
            getNodeAfter(parentNode, update.afterNode)
          );
          break;
        case "MOVE_EXISTING":
          moveChild(
            parentNode,
            update.fromNode,
            getNodeAfter(parentNode, update.afterNode)
          );
          break;
        case "SET_MARKUP":
          setInnerHTML(
            parentNode,
            update.content
          );
          break;
        case "TEXT_CONTENT":
          setTextContent(
            parentNode,
            update.content
          );
          break;
        case "REMOVE_NODE":
          removeChild(parentNode, update.fromNode);
          break;
      }
    }
  }

我們的實(shí)例會(huì)走到"TEXT_CONTENT"的分支里，然后這就是最后一步了，React調(diào)用setTextContent方法，此方法會(huì)對(duì)真正的DOM節(jié)點(diǎn)進(jìn)行內(nèi)容更改。

不錯(cuò)不錯(cuò)，最終內(nèi)部被更新到了頁面上，這就是一個(gè)重繪的過程了。還有什么東西沒有講到嗎？嗯，不要著急，讓我們先完成這個(gè)更新過程。所有的東西都已經(jīng)準(zhǔn)備完畢，所有我們組件的componentDidUpdate方法會(huì)被調(diào)用。那么，這種延遲調(diào)用是如何實(shí)現(xiàn)的呢？沒錯(cuò)，就是使用事務(wù)包裝器。就像之前提到的，‘臟’組件的更新是被ReactUpdateFlushtransaction給包裝過的，其中一個(gè)包裝器里就有調(diào)用this.callbackQueue.notifyAll的邏輯，也就是在這里，componentDidUpdate會(huì)被調(diào)用。完美！

現(xiàn)在，我們真的完成了整個(gè)過程。