diff算法

时间 2019-11-20

标签 diff 算法繁體版

原文原文链接

diff算法的做用
计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操做，而非从新渲染整个页面。react

　　传统diff算法
　　经过循环递归对节点进行依次对比，算法复杂度达到 O(n^3) ，n是树的节点数，这个有多可怕呢？——若是要展现1000个节点，得执行上亿次比较。。即使是CPU快能执行30亿条命令，也 很难在一秒内计算出差别。

　　react的diff算法

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

　　　　调和：将Virtual DOM树转换成actual DOM树的最少操做的过程称为调和。

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

　　策略一（tree diff）：
　　　　Web UI中DOM节点跨层级的移动操做特别少，能够忽略不计。性能

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

　　策略三（element diff）：
　　　　对于同一层级的一组子节点，经过惟一id区分。spa

　　 tree diff算法

　　（1）React经过updateDepth对Virtual DOM树进行 层级控制。
　　（2）对树分层比较，两棵树只对 同一层次节点 进行比较。若是该节点不存在时，则该节点及其子节点会被彻底删除，不会再进一步比较。
　　（3）只需遍历一次，就能完成整棵DOM树的比较。

　　对于策略一，React 对树进行了分层比较，两棵树只会对同一层次的节点进行比较。component

　　只会对相同层级的 DOM 节点进行比较，当发现节点已经不存在时，则该节点及其子节点会被彻底删除，不会用于进一步的比较。递归

　　若是出现了 DOM 节点跨层级的移动操做。索引

　　如上图这样，A节点就会被直接销毁了。element

　　Diif 的执行状况是：create A -> create C -> create D -> delete A开发

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

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

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

　　注意：若是组件D和组件G的结构类似，可是 React判断是不一样类型的组件，则不会比较其结构，而是删除组件D及其子节点，建立组件G及其子节点。

　　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进行区分，移动便可。

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

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

　　删除：（1）组件 D 在集合（A,B,D）中，但 D的节点已经更改，不能复用和更新，因此须要删除旧的 D ，再建立新的。

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

　　移动的条件：

对新集合中的节点进行循环遍历，新旧集合中是否存在相同节点
nextIndex: 新集合中当前节点的位置
lastIndex: 访问过的节点在旧集合中最右的位置（最大位置）
If (child._mountIndex < lastIndex)

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

　　（1）看着上图的 B，React先重新中取得B，而后判断旧中是否存在相同节点B，当发现存在节点B后，就去判断是否移动B。
　　B在旧中的index=1，它的lastIndex=0，不知足 index < lastIndex 的条件，所以 B 不作移动操做。此时，一个操做是，lastIndex=(index,lastIndex)中的较大数=1.

　　注意：lastIndex有点像浮标，或者说是一个map的索引，一开始默认值是0，它会与map中的元素进行比较，比较完后，会改变本身的值的（取index和lastIndex的较大数）。

　　（2）看着 A，A在旧的index=0，此时的lastIndex=1（由于先前与新的B比较过了），知足index<lastIndex，所以，对A进行移动操做，此时lastIndex=max(index,lastIndex)=1。

　　（3）看着D，同（1），不移动，因为D在旧的index=3，比较时，lastIndex=1，因此改变lastIndex=max(index,lastIndex)=3

　　（4）看着C，同（2），移动，C在旧的index=2，知足index<lastIndex（lastIndex=3），因此移动。

　　因为C已是最后一个节点，因此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操做结束。

　　diff的不足与待优化的地方

　　看图的 D，此时D不移动，但它的index是最大的，致使更新lastIndex=3，从而使得其余元素A,B,C的index<lastIndex，致使A,B,C都要去移动。

理想状况是只移动D，不移动A,B,C。所以，在开发过程当中，尽可能减小相似将最后一个节点移动到列表首部的操做，当节点数量过大或更新操做过于频繁时，会影响React的渲染性能。