react VS Vue diff算法

react diff

• diff算法的作用：数据更改，生成相应的虚拟DOM，与真实DOM作对比，通过diff算法，对比出有变化的部分，通过原生的dom操作只更新有变化的部分。这样就不用想原生DOM，有一处修改就会造成整个页面的整改。

• 传统diff算法：循环递归地方式遍历节点，时间复杂度为O(n^3)

• react的diff：通过最少的步骤，将虚拟DOM转化为真实DOM，时间复杂度为O(n)

  • 树的diff：跨层级的dom操作很少，可以忽略不计

    1. 通过uodateDepth对虚拟数进行层级控制
    2. 只对两棵树同一层级进行比较，节点不存在就直接删掉，遍历一次就能完成比较
    3. 如果出现跨层操作，比如a从原位置移动到b位置，就删除原位置的a，在b新建a，所以a以下的树会被重建，所以官方不建议跨层操作，建议通过隐藏显示来操作，比如visibility:hidden

  • 组件diff：相同类型组件生成相同树结构；不同类型组件生成不同树结构

    1. 同一类型的组件，按原策略（层级比较）
    2. 同一类型的组件，a变化时，虚拟DOM没有变，可以在这里进行shouldComponentUpdate操作
    3. 如果被判定为不同类型的组件，删除原组件，构建新组件

  • 元素diff：同一层级的一组子节点，通过唯一id进行区分

    1. 插入：如果元素不在原集合，就插入

    2. 删除：d在集合中，但是d节点被更改，不能更新复用，就删除重建；或者d没有了，直接删除

    3. 移动：d在集合中，并且没有变化，只是换了位置，通过key来区分并移动。所以通过map出来的元素，如果不加key，就会报错

       :warning:比较元素的新旧index：lastIndex，index；只有index

       所以不难理解为什么不要把index作为key值（当数组变化了，index也会变化，从而lastIndex和index不再能正确代表新旧index），应该用元素的唯一标识id作为key值

Vue diff

• 虚拟DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树结构。（虚拟DOM和oldVNode都是对象）
• 比较新旧节点的时候，比较只会在同层级进行，不会跨层级比较。
• 当数据改变，set方法会通知所有订阅者watcher，订阅者会调用patch(oldVnode, Vnode)给真实的DOM打补丁，更新相应的视图。是否是同一个VNode？不是就替换，是就继续进行patch
• patch接收oldVnode和Vnode来代表新的节点和之前的旧节点
  • 判断两节点是否值得比较，值得就继续比较；不值得直接替换
  • 当确定值得比较后，会对两个节点指定patchVnode方法
    • 找到对应的真实DOM，称el，判断Vnode和oldVnode是否指向同一对象，如果是直接return
    • 都有文本对象且不相等，就将el的文本节点设置为Vnode的文本节点
    • 如果oldVnode没有子节点，而Vnode有，将Vnode子节点真实化后添加到el
    • 如果两个都有子节点，执行updateChildren函数比较子节点！！！
  • updateChilldren(parentElement,oldCh,newCh)
    • oldCh旧的子节点，newCh新的子节点提取出来，oldCh和newCh各有两个头尾变量，startIdx和EndIdx；2个变量互相比较。涉及到4种比较方式，如果4种都不成功，就用key来比较，比较过程中，变量会向中间靠拢，一旦startIdx>endIdx，表明oldCh和newCh至少有一个已经遍历结束。如果old先结束，那么newCh中的节点按照其index插入到DOM中去；如果newCh先遍历完，就将真实DOM中多余的节点删掉