谈谈React中Diff算法的策略及实现

一、什么是Diff算法

• 传统Diff：diff算法即差别查找算法；对于Html DOM结构即为tree的差别查找算法；而对于计算两颗树的差别时间复杂度为O（n^3）,显然成本过高，React不可能采用这种传统算法；

• React Diff：

  • 以前说过，React采用虚拟DOM技术实现对真实DOM的映射，即React Diff算法的差别查找实质是对两个JavaScript对象的差别查找；
  • 基于三个策略：
  1. Web UI 中 DOM 节点跨层级的移动操做特别少，能够忽略不计。（tree diff）
  2. 拥有相同类的两个组件将会生成类似的树形结构，拥有不一样类的两个组件将会生成不一样的树形结（component diff）
  3. 对于同一层级的一组子节点，它们能够经过惟一 id 进行区分。（element diff）

---

二、React Diff算法解读

• 首先须要明确，只有在React更新阶段才会有Diff算法的运用；
• React更新机制：

• React Diff算法优化策略图：

• React更新阶段会对ReactElement类型判断而进行不一样的操做；ReactElement类型包含三种即：文本、Dom、组件；

• 每一个类型的元素更新处理方式：

  • 自定义元素的更新，主要是更新render出的节点，作甩手掌柜交给render出的节点的对应component去管理更新。
  • text节点的更新很简单，直接更新文案。

  • 浏览器基本元素的更新，分为两块：

    1. 更新属性，对比出先后属性的不一样，局部更新。而且处理特殊属性，好比事件绑定。
    2. 子节点的更新，子节点更新主要是找出差别对象，找差别对象的时候也会使用上面的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
        );
      }
    }
  }

二、对于自定义组件元素：

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

• 须要明确的是，何为组件，能够说组件只不过是一段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
    );

    // ......
}

• 在this._updateDOMChildren方法内部才调用了diff算法。

---

三、React中Diff算法的实现

_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])
        );
      }
    }
  }

---

五、基于中Diff的开发建议

• 基于tree diff：

  1. 开发组件时，注意保持DOM结构的稳定；即，尽量少地动态操做DOM结构，尤为是移动操做。
  2. 当节点数过大或者页面更新次数过多时，页面卡顿的现象会比较明显。
  3. 这时能够经过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。

• 基于component diff：

  1. 注意使用 shouldComponentUpdate() 来减小组件没必要要的更新。
  2. 对于相似的结构应该尽可能封装成组件，既减小代码量，又能减小component diff的性能消耗。

• 基于element diff：

  1. 对于列表结构，尽可能减小相似将最后一个节点移动到列表首部的操做，当节点数量过大或更新操做过于频繁时，在必定程度上会影响 React 的渲染性能。
• 接下来手动实现一个简单的Diff算法即将更新，敬请期待～～～

“积跬步、行千里”—— 持续更新中~，喜欢留下个赞哦！

• 往期经典好文：

  1. 团队合做必备的Git操做
  2. 谈谈Js前端规范化
  3. 从React渲染流程分析Diff算法

• 相关专栏推荐：

  1. React学习之路