react diff
diff算法的作用：数据更改，生成相应的虚拟DOM，与真实DOM作对比，通过diff算法，对比出有变化的部分，通过原生的dom操作只更新有变化的部分。这样就不用想原生DOM，有一处修改就会造成整个页面的整改。
传统diff算法：循环递归地方式遍历节点，时间复杂度为
O(n^3)-
react的diff：通过最少的步骤，将虚拟DOM转化为真实DOM，时间复杂度为O(n)
-
树的diff：跨层级的dom操作很少，可以忽略不计
- 通过uodateDepth对虚拟数进行层级控制
- 只对两棵树同一层级进行比较，节点不存在就直接删掉，遍历一次就能完成比较
- 如果出现跨层操作，比如
a从原位置移动到b位置，就删除原位置的a，在b新建a，所以a以下的树会被重建，所以官方不建议跨层操作，建议通过隐藏显示来操作，比如visibility:hidden
-
组件diff：相同类型组件生成相同树结构；不同类型组件生成不同树结构
- 同一类型的组件，按原策略（层级比较）
- 同一类型的组件，
a变化时，虚拟DOM没有变，可以在这里进行shouldComponentUpdate操作 - 如果被判定为不同类型的组件，删除原组件，构建新组件
-
元素diff：同一层级的一组子节点，通过唯一id进行区分
插入：如果元素不在原集合，就插入
删除：
d在集合中，但是d节点被更改，不能更新复用，就删除重建；或者d没有了，直接删除-
移动：
d在集合中，并且没有变化，只是换了位置，通过key来区分并移动。所以通过map出来的元素，如果不加key，就会报错:warning:比较元素的新旧index：lastIndex，index；只有index<lastIndex才会移动，也就是往右移动，往左不移动。所以！！如果在一长串集合中，如果最后一个元素移动到第一个，前面的所有元素都会移动，性能不佳要尽量避免
所以不难理解为什么不要把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函数比较子节点！！！
- 找到对应的真实DOM，称
-
updateChilldren(parentElement,oldCh,newCh)- oldCh旧的子节点，newCh新的子节点提取出来，oldCh和newCh各有两个头尾变量，startIdx和EndIdx；2个变量互相比较。涉及到4种比较方式，如果4种都不成功，就用key来比较，比较过程中，变量会向中间靠拢，一旦startIdx>endIdx，表明oldCh和newCh至少有一个已经遍历结束。如果old先结束，那么newCh中的节点按照其index插入到DOM中去；如果newCh先遍历完，就将真实DOM中多余的节点删掉
