react-diff算法及优化策略【前端每日一题-21】

谈谈你对react-diff算法的理解及优化策略？

这道考题是考察你对react的一个理解程度。react是通过Virtual DOM进行比较出真正变化的部分，并只针对变化部分进行原生的DOM操作，而非重新渲染整个页面。

Diff策略

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

策略一：tree diff

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

那么问题来了，如果DOM节点出现了跨层级操作,diff会咋办呢？
答：diff只简单考虑同层级的节点位置变换，如果是跨层级的话，只有创建节点和删除节点的操作。

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

策略二：component diff

React对不同的组件间的比较，有三种策略
（1）同一类型的两个组件，按原策略（层级比较）继续比较Virtual DOM树即可。

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

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

策略三：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算法，讲解通俗易懂。

基于react-diff的开发建议

• 基于tree diff：

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

• 基于component diff：

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

• 基于element diff：

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

参考：

React之diff算法

转载于:https://juejin.im/post/5d42a2c36fb9a06b0517cde0