什么是虚拟dom

组件第一次渲染的时候会生成一个虚拟dom和一个真实的dom然会会把真实的dom渲染到页面上
如果这个组件受到响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建一个新的虚拟dom树，这时会用新虚拟dom树(newVnode)和旧虚拟dom树(oldVnode)进行对比，通过比对，找到最小更新量，然后更新必要的虚拟dom节点，最后，这些更新过的虚拟节点会去修改它们对应的真实dom。这样一来就保证了对真实dom的操作达到了最小的改动。

react的diff算法

遵行三个原则：1.树的比较（tree diff）2.组建的比较（component diff）3.元素的比较（element diff）

1.树的比较
react会对比虚拟dom树和真实的dom树，对比他们的同一层级，对比时如果存在虚拟dom没有的节点而真是dom有就会删除这个节点，如果虚拟dom有真是dom没有就会创建这个节点，此过程只有只有删除和创建操作

注意：
但是如果DOM节点出现了跨层级操作，diff会如何处理？
就是A节点下面的b节点移动到了D的节点下，这时react会删除A节点下的b节点然后再D节点下创建b节点

2.组件的比较
如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的

3.元素的比较

如果存在key的话react就会对比key一样的新旧集合，没有的话只能按顺序比较，这也是为什么加key能够优化性能，如果存在一个列表，把第一个li移动到最后一个li下面，如果不存在key后续li都会更新存在key的话只要把第一个移动到最后就行，其他节点都不会更新

react会记录旧集合的索引，比如交oldindex，来回记录一个索引，他代表再就集合中已经对比过的元素在旧集合中最大的索引，比如叫maxindex，他们有一个移动规则，当oldIndex>maxIndex时，将oldIndex的值赋值给maxIndex，当oldIndex=maxIndex时，不操作，当oldIndex

详细的看：
https://vue3js.cn/interview/React/diff.html#%E4%B8%89%E3%80%81%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

https://blog.csdn.net/qq_36407875/article/details/84965311