Diff算法如何驱动高性能渲染？

真实DOM操作的性能困境

在深入虚拟DOM之前，让我们先理解为什么直接操作真实DOM会导致性能问题：

// 直接操作DOM的典型场景
function updateUserList(users) {
const list = document.getElementById(‘user-list’);

// 清空现有列表
list.innerHTML = ”;

// 重新创建所有元素
users.forEach(user => {
const item = document.createElement(‘li’);
item.className = ‘user-item’;
item.innerHTML = `
<div>${user.name}</div>
<div>${user.email}</div>
`;
list.appendChild(item);
});
}

性能瓶颈分析：

🔋 昂贵的DOM操作：每次创建/删除元素都会触发浏览器重排（Reflow）和重绘（Repaint）
⏱️ O(n)复杂度：每次更新都需要完全重建整个列表
🔥 资源浪费：未变化的元素也被重新创建
虚拟DOM：轻量级的内存表示
虚拟DOM是真实DOM的轻量级JavaScript对象表示：

// 虚拟DOM结构示例
const virtualDOM = {
type: ‘ul’,
props: {
id: ‘user-list’,
className: ‘list’
},
children: [
{
type: ‘li’,
props: { className: ‘user-item’ },
children: [
{ type: ‘div’, children: ‘张三’ },
{ type: ‘div’, children: ‘zhang@example.com’ }
]
},
// 更多列表项…
]
}

Diff算法：虚拟DOM的核心引擎
当状态变化时，React会：

创建新的虚拟DOM树
与之前的虚拟DOM树进行对比（Diffing）
计算最小变更集（Patches）
批量应用到真实DOM
Diff算法的三大优化策略
1. 同级比较（Tree Diff）
React只比较同一层级的节点，不跨层级比较：

// 更新前
<div>
<Counter />
</div>

// 更新后 – Counter组件会被完全销毁并重建
<p>
<Counter />
</p>

2. 类型比较（Component Diff）

当组件类型不同时，直接替换整个组件：

// 更新前
<Button color=”blue”>提交</Button>

// 更新后 – 整个Button组件被替换
<SubmitButton>提交</SubmitButton>

3. 列表键值（Element Diff）

使用key属性识别列表项，实现高效复用：

// 没有key – 性能低下
{items.map(item => <li>{item}</li>)}

// 有key – 高效复用
{items.map(item => <li key={item.id}>{item.text}</li>)}