虚拟DOM和Diff算法

[vivatoviva]

react将DOM节点抽象为虚拟DOM， 然后通过新旧DOM的差异对比（DIff算法），最终只把变化的部分重新渲染，提高渲染效率的过程，整个过程可以整理如下：

• 使用js结构来表示DOM树结构，然后使用这个树构建一课真正DOM树，然后插入到文档中去。
• 当状态变更的时候，重新构建一棵新的对象树，然后新旧对象树进行对比，记录两颗树的差异
• 把差异应用到第一步构建的真正DOM树上，视图就更新了

为什么要有虚拟DOM？

• 组件高度抽象化
• 可以更好的实现SSR，同构渲染
• 框架跨平台
• 减少直接操作DOM树引起的浏览器重绘和回流，提高性能

Diff算法

传统的Diff算法时间复杂度是o(n^3)

react团队结合web页面的特点，做出两个假设，使得diff算法的时间复杂度就直接降低到o(n)

• 两个相同组件产生类似的DOM结构，不同组件产生不同的DOM结构
• 对于同一层次的一组子节点，它们可以通过唯一的key（ID）进行区分

react分别出现三种优化方式，一种是tree diff、component diff以及 element diff算法

Tree Diff

概念: 将新旧两颗虚拟 DOM 树,按照层级对应的关系,从头到尾的遍历一遍,,就能找到那些元素是需要更新的,这种方式: Tree Diff

1 只会对相同颜色方框内（同级）的DOM节点进行比较，即同一父节点下的所有子节点
2 当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较
复制代码

• 执行过程：create A -> create B -> create C -> delete A

Component Diff

不同组件之间的对比 概念: 在对比每一个层级的时候,会有自己的组件,这种组件的对比方式就叫: Component Diff ;

​ 这种对比方法其实比较的就是类型.↓↓↓

• 如果类型相同,暂时不更新,
• 如果类型不相同,就需要更新; ( 删除旧的组件,再创建一个新的组件,插入到删除组件的那个位置)

• 执行过程：delete D -> create G

Element Diff

同一层级中元素之间的对比 概念: 在类型相同的组件内, 再继续对比组件内部的元素,查看内部元素是否相同,如果需要修改,找到需要修改的元素,进行针对性的修改! 这种方式就叫: Element Diff

三种节点操作：
1 INSERT_MARKUP（插入）
2 MOVE_EXISTING（移动）
3 REMOVE_NODE（删除）

INSERT_MARKUP：新的 component 类型不在老集合里，需要对新节点执行插入操作。

MOVE_EXISTING：老的集合包含新的 component 类型，就需要做移动操作，可以复用以前的 DOM 节点。

REMOVE_NODE：老的 component 不在新集合里的，需要执行删除操作 或者 老的 component 类型在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作
复制代码

• 执行过程：B != A，则创建并插入 B，删除 A；以此类推，创建并插入 A、D、C，删除 B、C、D

  

• 执行过程：B、D 不做任何操作，A、C 进行移动操作

作者：Y__

链接：https://juejin.im/post/5a3200fe51882554bd5111a0

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

问题

• 为什么在map组件的时候要确唯一一个key值，以及key如何让diff变得更加高效？

使用key值主要是用于进行diff算法中Element diff，这里面是三种操作，插入、删除、移动，key值可以用来标识一个组件，假设没有key值，当我们在子组件的中插入一个新的节点，那么react的diff算法会认为所有节点的都更新，就会删除现存的节点，然后重新按照新的顺序添加相关节点，这种处理会造成性能的急速下降，所以我们添加key值可以保证让react的diff算法认为这种操作只是头部插入一个节点，不需要重新更新所有节点。具体到相关的算法上如果存在key值的时候可以认为只是一种map映射的关系，如果不存在key值的时候，这种方式是循环进行遍历进行寻找，所以来讲的话，key值是可以让diff变得更加高效。