reactdiff的方法该如何运用

发布时间：2023-07-04 10:42:04 所属栏目：教程来源：未知

导读： 　　给大家分享一下react的diff方法怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获

　　给大家分享一下react的diff方法怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　react的diff方法可用于找出两个对象之间的差异，目的是尽可能做到节点复用；diff算法是调和的具体实现，而调和是指将Virtual DOM树转换成Actual DOM树的最少操作的过程。

　　一、Diff算法的作用

　　渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点。

　　        diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用。

　　        注：此处说到的对象，指的其实就是vue中的virtual dom（虚拟dom树），即使用js对象来表示页面中的dom结构。

　　二、React的Diff算法

　　1、什么是调和？

　　将Virtual DOM树转换成Actual DOM树的最少操作的过程称为调和。

　　2、什么是React diff算法？

　　 diff算法是调和的具体实现。

　　3、diff策略

　　 React用三大策略将O(n3)复杂度转化为O(n)复杂度

　　(1)策略一（tree diff）：Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

　　(2)策略二（component diff）：拥有相同类的两个组件生成相似的树形结构，拥有不同类的两个组件生成不同的树形结构。

　　(3)策略三（element diff）：对于同一层级的一组子节点，通过唯一id区分。

　　react的diff方法怎么使用

　　4、tree diff：

　　(1)React通过updateDepth对Virtual DOM树进行层级控制。

　　(2)对树分层比较，两棵树只对同一层次节点进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。

　　(3)只需遍历一次，就能完成整棵DOM树的比较。

　　如果DOM 节点出现了跨层级操作，Diff会怎么办？

　　答：Tree DIFF是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁。如图所示，左边是旧属，右边是新属，第一层是R组件，一模一样，不会发生变化；第二层进入Component DIFF，同一类型组件继续比较下去，发现A组件没有，所以直接删掉A、B、C组件；继续第三层，重新创建A、B、C组件。

　　react的diff方法怎么使用

　　如上图所示，以A为根节点的整棵树会被重新创建，而不是移动，因此官方建议不要进行DOM节点跨层级操作，可以通过CSS隐藏、显示节点，而不是真正地移除、添加DOM节点。

　　5、component diff :

　　React对不同的组件间的比较，有三种策略

　　(1)同一类型的两个组件，按原策略（层级比较）继续比较Virtual DOM树即可。

　　(2)同一类型的两个组件，组件A变化为组件B时，可能Virtual DOM没有任何变化，如果知道这点（变换的过程中，Virtual DOM没有改变），可节省大量计算时间，所以用户可以通过 shouldComponentUpdate() 来判断是否需要判断计算。

　　(3)不同类型的组件，将一个（将被改变的）组件判断为dirtycomponent（脏组件），从而替换整个组件的所有节点。

　　react的diff方法怎么使用

　　注意：如上图所示，当组件D变为组件G时，即使这两个组件结构相似，一旦React判断D和G是不用类型的组件，就不会比较两者的结构，而是直接删除组件D，重新创建组件G及其子节点。虽然当两个组件是不同类型但结构相似时，进行diff算法分析会影响性能，但是毕竟不同类型的组件存在相似DOM树的情况在实际开发过程中很少出现，因此这种极端因素很难在实际开发过程中造成重大影响。

　　6、element diff

　　当节点处于同一层级时，diff提供三种节点操作：删除、插入、移动。

　　插入：组件 C 不在集合（A,B）中，需要插入

　　删除：

　　(1)组件 D 在集合（A,B,D）中，但 D的节点已经更改，不能复用和更新，所以需要删除旧的D ，再创建新的。

　　(2)组件D之前在集合（A,B,D）中，但集合变成新的集合（A,B）了，D 就需要被删除。

　　移动：组件D已经在集合（A,B,C,D）里了，且集合更新时，D没有发生更新，只是位置改变，如新集合（A,D,B,C），D在第二个，无须像传统diff，让旧集合的第二个B和新集合的第二个D 比较，并且删除第二个位置的B，再在第二个位置插入D，而是（对同一层级的同组子节点）添加唯一key进行区分，移动即可。

　　移动情形一：新旧集合中存在相同节点但位置不同时，如何移动节点

　　react的diff方法怎么使用

　　(1)B不移动，不赘述，更新l astIndex=1

　　(2)新集合取得 E，发现旧不存在，故在lastIndex=1的位置创建E，更新lastIndex=1

　　(3)新集合取得C，C不移动，更新lastIndex=2

　　(4)新集合取得A，A移动，同上，更新lastIndex=2

　　(5)新集合对比后，再对旧集合遍历。判断新集合没有，但旧集合有的元素（如D，新集合没有，旧集合有），发现 D，删除D，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：

　　开发组件时，注意保持DOM结构的稳定；即，尽可能少地动态操作DOM结构，尤其是移动操作。

　　当节点数过大或者页面更新次数过多时，页面卡顿的现象会比较明显。

　　这时可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。

　　基于component diff：

　　注意使用 shouldComponentUpdate() 来减少组件不必要的更新。

　　对于类似的结构应该尽量封装成组件，既减少代码量，又能减少component diff的性能消耗。

　　基于element diff：

　　对于列表结构，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!