vue和react的diff算法

diff算法目的：

         通过新旧虚拟dom节点的对比，减少真实dom的操作次数。

vue中diff算法的原理：

      vue 只会对新旧节点中父节点是相同节点的那一层子节点进行比较，节点比较过程讲究的是节点复用，因此，对于相同节点会采用移动（采用了双指针），不存在的节点会采用新增或删除。

react中diff算法的原理：

1、tree层级：dom节点跨层级的移动操作特别少，可以将其忽略不计。

2、component层级：拥有相同类的两个组件会生成类似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。

3、element层级：对于同一层级的一组子节点，可以通过唯一key进行区分。

相同点

• 都是两组虚拟dom的对比(react16.8之后是fiber与虚拟dom的对比)
• 只对同级节点进行对比，简化了算法复杂度
• 都用key做为唯一标识，进行查找，只有key和标签类型相同时才会复用老节点
• 遍历前都会根据老的节点构建一个map，方便根据key快速查找

不同点

• react在diff遍历的时候，只对需要修改的节点进行了记录，形成effect list，最后才会根据effect list 进行真实dom的修改，修改时先删除，然后更新与移动，最后插入
• vue 在遍历的时候就用真实dom的insertBefore方法，修改了真实dom，最后做的删除操作
• react 采用单指针从左向右进行遍历
• vue采用双指针，从两头向中间进行遍历
• react的虚拟diff比较简单，vue中做了一些优化处理，相对复杂，但效率更高