React Diff算法

React Diff算法

diff算法，是虚拟DOM产生的一个概念，用来计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面，从而提高了页面的渲染效率。

一、它的作用是什么？

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

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

二、React的Diff算法

1.了解一下什么是调和？

将virtualDOM（虚拟DOM）转换成actualDOM（真实DOM）的最少操作过程就叫调和，简单理解就是简化算法复杂度。

2.react的diff算法

react的diff算法就是实现了上述的调和，简化了算法的复杂度。

3.React Diff的三大策略

react用tree diff(树比较)、component diff（组件比较）、element diff（元素比较）三大策略将O(n^3)的复杂度转化为O(n)的复杂度
(1) 策略一（tree diff）：Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

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

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

4.tree diff：

(1) React通过updateDepth对比Virtual DOM树进行层级控制。
(2) 对树分层比较，两颗树只对同一层次节点进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。
(3) 只需遍历一次，就能完成整颗DOM树的比较。

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

Tree Diff是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁。

5. component diff：

(1) 同一类型的两个组件，按原策略(层级比较)继续比较Virtual DOM树即可。
(2) 同一类型的两个组件，组件A变化为组件B时，可能Virtual DOM没有任何变化，如果知道这点，可节省大量计算时间，所以用户可以通过shouldComponentUpdate()来判断是否需要判断计算。
(3) 不同类型的组件，将一个组件判断为dirtycomponent（脏组件），从而替换整个组件的所有节点。

注意：如上图所示，当组件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进行区分，移动即可。

(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操作结束。

6. element diff：

基于tree diff：

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

基于component diff：

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

基于element diff：

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

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。