React虚拟DOM是什么？是如何提升性能的

React虚拟DOM是什么？是如何提升性能的

React虚拟DOM是React框架的核心概念之一，它通过使用JavaScript对象来表示真实DOM的结构，从而实现高效的性能优化。本文将详细介绍虚拟DOM的工作原理及其三个核心策略：树形结构同层比较、相同类型节点的处理以及列表diff算法，帮助读者深入理解React如何通过最小化DOM操作来提升应用性能。

虚拟DOM的工作原理

虚拟DOM是React的核心概念，它使用JavaScript对象来反应真实DOM的结构。当组件的状态变更后，React会计算出新的虚拟DOM树，并跟前一次的虚拟DOM树进行对比，找出差异（也就是需要更新的部分），最后仅将这些差异应用到真实DOM中。通过这种方式，React避免了对真实DOM的频繁操作，从而提高了性能。

ReactDOM Diff算法核心思想

核心策略一：树形结构同层比较，不跨层对比

React默认认为：

• 不同层级的DOM结构几乎不会移动。
• 如果节点层级发生变化，直接销毁原来的DOM，重新创建。

如上图所示，当A需要移动到D下面时，React会先删除A，然后再到D节点中创建A。

核心策略二：相同类型节点，保留，更新属性；不同类型节点，销毁再创建

如上图：当
component D的位置
换成了
component G
后，即使两者的结构非常类似，也会将
D
删除再重新创建
G

核心策略三：列表 diff，通过 key 提升性能

• 对比新旧列表的长度：如果新旧列表 长度不同，则肯定有增删元素；
• 使用
  key
  属性来唯一标识每个节点。
  key
  的作用是帮助 React 判断一个节点是否在新旧列表中相同，从而决定是否 复用、删除 或 插入 节点
  基于key的移动算法策略： 只要遍历新列表的时候，老列表的顺序还能顺着走(即索引是递增的)，就说明顺序还是对的，不需要移动节点。一旦需要回头，说明老列表里的顺序不满足新列表了，就需要移动

以上图为例，比较过程如下：
新集合遍历到的节点 在老集合中的索引 lastPlacedIndex（期望递增） 是否需要移动
b 1 1 否
a 0 1 是
d 3 1 否
c 2 3 是

• b→ 老集合索引是 1，不动。
• a→ 老集合索引是 0，发现索引不递增(<lastPlacedIndex)，触发移动。
• d→ 老集合索引是 3，不动。
• c→ 老集合索引是 2，索引不是递增(应该大于3)，触发移动。

// 模拟的新旧节点集合
const oldList = ['a', 'b', 'c', 'd'];
const newList = ['b', 'a', 'd', 'c'];
// 用于存储老集合节点在新集合中的索引
let lastPlacedIndex = -1; // 初始时没有节点被处理过
// 遍历新集合
newList.forEach((newNode, newIndex) => {
 // 查找新节点在老集合中的位置
 const oldIndex = oldList.indexOf(newNode);
 // 判断是否需要移动
 if (oldIndex < lastPlacedIndex) {
 // 需要移动，因为索引不再递增
 console.log(`节点 ${newNode} 需要移动`);
 } else {
 // 不需要移动
 console.log(`节点 ${newNode} 不需要移动`);
 }
 // 更新 lastPlacedIndex
 lastPlacedIndex = Math.max(lastPlacedIndex, oldIndex);
});