虚拟dom和diff算法

虚拟dom

虚拟DOM（Virtual DOM）是一种将页面状态抽象为JavaScript对象（虚拟节点）的技术。在前端框架中，虚拟DOM常常被用来描述页面状态、维护组件状态，进而实现高效的页面更新。

虚拟DOM的基本原理是在内存中构建一棵虚拟的DOM树，用JavaScript对象模拟出真实的DOM结构，对这个虚拟的DOM进行操作，最后再将变化的部分更新到真实的DOM上。这个过程相当于把真实DOM转换成虚拟DOM，再将虚拟DOM转换成真实DOM。

优点

1. 减少DOM操作，提高性能。由于DOM操作是非常耗费性能的，因此虚拟DOM可以在内存中进行操作，最后一次性将变化更新到真实DOM上，从而减少了DOM操作的次数，提高了页面渲染性能。

2. 方便跨平台开发。由于虚拟DOM是一个JavaScript对象，因此可以方便地在不同平台上共享和传递，例如Node.js、Web Worker等。

3. 易于维护。通过使用虚拟DOM，我们可以将页面状态、UI逻辑和视图的渲染分离，从而更容易进行代码维护和重构。

diff

diff 分为单节点diff和多节点diff

diff优化

1. 只对同级元素进行Diff。如果一个DOM节点在前后两次更新中跨越了层级，那么React不会尝试复用他。
2. 两个不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。
3. 开发者可以通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。

单节点diff

单节点Diff也被称为原地更新算法，它是在进行Virtual DOM比较时，只考虑同一层级下的节点，不会跨层级比较。具体实现是，当进行Virtual DOM比较时，如果节点类型相同且key相同，则更新其属性；否则替换整个节点。这样做的好处是可以提高比较速度，但缺点是无法处理节点的移动和复杂的变更操作。

多节点diff

多节点Diff是通过两轮遍历实现的。第一轮遍历是针对新旧节点列表进行的，用于标记需要进行删除、添加、移动和更新的节点，以及处理一些特殊情况（例如key属性变更）。第二轮遍历是针对被标记的节点进行的，用于实际的DOM操作。

具体来说，React的多节点Diff算法包括以下几个步骤：

1. 遍历旧节点列表，标记需要删除和移动的节点，并建立旧节点的索引；

2. 遍历新节点列表，标记需要添加和移动的节点，并尝试复用旧节点；

3. 处理特殊情况，如key属性变更和节点类型不同等；

4. 遍历被标记的节点，执行删除、添加、移动和更新操作；

5.对于无法复用的旧节点和新节点，创建新的DOM节点并添加到父节点上。