React中Diff演算法是什麼？ Diff演算法的策略及實現-js教程-PHP中文網

1、什麼是Diff演算法

首頁

web前端

js教程

React中Diff演算法是什麼？ Diff演算法的策略及實現

不言

Sep 28, 2018 pm 05:27 PM

html html5 javascript react.js 前端

本篇文章帶給大家的內容是關於React中Diff演算法是什麼？ Diff演算法的策略及實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1、什麼是Diff演算法

傳統Diff：diff演算法即差異查找演算法；對於Html DOM結構即為tree的差異查找演算法；而對於計算兩顆樹的差異時間複雜度為O（n^3）,顯然成本太高，React不可能採用這種傳統演算法；

## React Diff：

基於三個策略：

Web UI 中DOM 節點跨層級的移動操作特別少，可以忽略不計。（tree diff）
擁有相同類別的兩個元件將會產生相似的樹狀結構，擁有不同類別的兩個元件將會產生不同的樹狀結（component diff )

對於同一層級的一組子節點，它們可以透過唯一id 進行區分。（element diff） React中Diff演算法是什麼？ Diff演算法的策略及實現

2、React Diff演算法解讀

首先需要明確，只有在React更新階段才會有Diff演算法的運用；

React中Diff演算法是什麼？ Diff演算法的策略及實現

React更新機制：

##React Diff演算法最佳化策略圖：

每個類型的元素更新處理方式：
自訂元素的更新，主要是更新render出的節點，做甩手掌櫃交給render出的節點的對應component去管理更新。

瀏覽器基本元素的更新，分成兩塊：

#更新屬性，對比出前後屬性的不同，局部更新。並且處理特殊屬性，例如事件綁定。

子節點的更新，子節點更新主要是找出差異對象，找差異對象的時候也會使用上面的shouldUpdateReactComponent來判斷，如果是可以直接更新的就會遞歸呼叫子節點的更新,這樣也會遞歸查找差異物件。不可直接更新的刪除之前的物件或新增新的物件。之後根據差異物件操作dom元素（位置變動，刪除，新增等）。

事實上Diff演算法只被調用於React更新階段的DOM元素更新過程；
為什麼這麼說？

，內容不同就直接更新替換，不會呼叫複雜的Diff演算法：

 ReactDOMTextComponent.prototype.receiveComponent(nextText, transaction) {
    //与之前保存的字符串比较
    if (nextText !== this._currentElement) {
      this._currentElement = nextText;
      var nextStringText = '' + nextText;
      if (nextStringText !== this._stringText) {
        this._stringText = nextStringText;
        var commentNodes = this.getHostNode();
        // 替换文本元素
        DOMChildrenOperations.replaceDelimitedText(
          commentNodes[0],
          commentNodes[1],
          nextStringText
        );
      }
    }
  }

登入後複製

2、對於自訂元件元素：

class Tab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 1,
        }
    }
    shouldComponentUpdate() {
        ....
    }
    render() {
        return (
            <p>
                </p><p>item1</p>
                <p>item1</p>
            
        )
    }
    
}

登入後複製

#需要明確的是，何為元件，可以說元件只不過是一段Html結構的包裝容器，並且具備管理這段Html結構的狀態等能力；

如上述Tab元件：它的實質內容就是render函數傳回的Html結構，而我們所說的Tab類別就是這段Html結構的包裝容器（可以理解為一個包裝盒子）；

在React渲染機製圖中可以看到，自訂元件的最後結合React Diff優化策略一（不同類別的兩個元件具備不同的結構）

ReactDOMComponent.prototype.receiveComponent = function(nextElement, transaction, context) {
    var prevElement = this._currentElement;
    this._currentElement = nextElement;
    this.updateComponent(transaction, prevElement, nextElement, context);
}

ReactDOMComponent.prototype.updateComponent = function(transaction, prevElement, nextElement, context) {
    //需要单独的更新属性
    this._updateDOMProperties(lastProps, nextProps, transaction, isCustomComponentTag);
    //再更新子节点
    this._updateDOMChildren(
      lastProps,
      nextProps,
      transaction,
      context
    );

    // ......
}

登入後複製

_updateChildren: function(nextNestedChildrenElements, transaction, context) {
    var prevChildren = this._renderedChildren;
    var removedNodes = {};
    var mountImages = [];

    // 获取新的子元素数组
    var nextChildren = this._reconcilerUpdateChildren(
      prevChildren,
      nextNestedChildrenElements,
      mountImages,
      removedNodes,
      transaction,
      context
    );

    if (!nextChildren && !prevChildren) {
      return;
    }

    var updates = null;
    var name;
    var nextIndex = 0;
    var lastIndex = 0;
    var nextMountIndex = 0;
    var lastPlacedNode = null;

    for (name in nextChildren) {
      if (!nextChildren.hasOwnProperty(name)) {
        continue;
      }
      var prevChild = prevChildren && prevChildren[name];
      var nextChild = nextChildren[name];
      if (prevChild === nextChild) {
        // 同一个引用，说明是使用的同一个component,所以我们需要做移动的操作
        // 移动已有的子节点
        // NOTICE：这里根据nextIndex, lastIndex决定是否移动
        updates = enqueue(
          updates,
          this.moveChild(prevChild, lastPlacedNode, nextIndex, lastIndex)
        );

        // 更新lastIndex
        lastIndex = Math.max(prevChild._mountIndex, lastIndex);
        // 更新component的.mountIndex属性
        prevChild._mountIndex = nextIndex;

      } else {
        if (prevChild) {
          // 更新lastIndex
          lastIndex = Math.max(prevChild._mountIndex, lastIndex);
        }

        // 添加新的子节点在指定的位置上
        updates = enqueue(
          updates,
          this._mountChildAtIndex(
            nextChild,
            mountImages[nextMountIndex],
            lastPlacedNode,
            nextIndex,
            transaction,
            context
          )
        );


        nextMountIndex++;
      }

      // 更新nextIndex
      nextIndex++;
      lastPlacedNode = ReactReconciler.getHostNode(nextChild);
    }

    // 移除掉不存在的旧子节点，和旧子节点和新子节点不同的旧子节点
    for (name in removedNodes) {
      if (removedNodes.hasOwnProperty(name)) {
        updates = enqueue(
          updates,
          this._unmountChild(prevChildren[name], removedNodes[name])
        );
      }
    }
  }

登入後複製

4、基於中Diff的開發建議

基於tree diff：

#########在開發元件時，請注意保持DOM結構的穩定；即，盡可能少地動態操作DOM結構，尤其是移動操作。 ############當節點數過大或頁面更新次數過多時，頁面卡頓的現象會比較明顯。 ############這時可以透過 CSS 隱藏或顯示節點，而不是真的移除或新增 DOM 節點。 ##################基於component diff###：###