React的Virtual DOM相比直接操作真实DOM，如何提升性能？

你困惑的点其实很常见——毕竟看起来React多了创建Virtual DOM和diff的步骤，怎么反而更快？核心原因在于真实DOM的操作成本远高于JS对象的操作成本，而且Virtual DOM帮你把零散的DOM更新合并成了最少的必要操作。

1. 真实DOM的“昂贵”之处 #

真实DOM不是简单的标签，它是浏览器维护的复杂对象，包含了样式、事件绑定、布局信息等大量附加数据。每次你直接操作真实DOM（比如修改文本、样式、添加元素），浏览器都要触发重排（Reflow）或重绘（Repaint）——这是浏览器重新计算页面布局、渲染像素的过程，非常消耗性能，尤其是在频繁操作的时候。

而Virtual DOM只是普通的JS对象，比如一个<div>对应的Virtual DOM可能是这样：

{
  type: 'div',
  props: { className: 'box' },
  children: ['Hello']
}

操作JS对象的成本极低，修改属性、创建新对象都只是内存中的操作，完全不会触发浏览器的渲染流程。

2. 批量更新与最小化DOM操作 #

直接操作DOM时，你可能会多次修改同一个元素：

// 三次独立的真实DOM操作，可能触发三次重排
const box = document.querySelector('.box');
box.textContent = 'Hi there';
box.style.color = 'blue';
box.classList.add('highlight');

而React会先在Virtual DOM上把所有修改都完成，再通过diff算法找出前后Virtual DOM的最小差异，最后只对真实DOM做一次必要的更新——这就把多次昂贵的DOM操作合并成了一次，大幅减少了重排重绘的次数。

3. 类比：草稿纸 vs 直接修改成品 #

可以把真实DOM想象成已经打印好的海报，Virtual DOM是电脑里的海报草稿：

• 如果你要修改海报上的三个地方，直接在打印好的海报上改，每改一处可能都要重新打印整张（对应真实DOM重排）；
• 但先在电脑草稿上改完所有内容，最后只打印修改过的部分（或者整张如果改得太多），效率显然更高。

什么时候Virtual DOM优势最明显？ #

当然，如果只是一次性替换整个页面，Virtual DOM的优势不大——但绝大多数前端应用都是局部更新：比如列表里新增一条数据、按钮状态变化、表单输入更新。这些场景下，diff算法能精准找到需要修改的节点，避免了不必要的DOM操作。

代码对比：直接操作 vs React #

直接操作DOM的低效场景：

// 每次输入都触发一次DOM修改和重排
const input = document.getElementById('username');
const display = document.getElementById('display');
input.addEventListener('input', (e) => {
  display.textContent = `Hello, ${e.target.value}!`;
});

React的处理方式：

function UsernameDisplay() {
  const [username, setUsername] = useState('');

  return (
    <div>
      <input 
        type="text"
        onChange={(e) => setUsername(e.target.value)}
      />
      <p>Hello, {username}!</p>
    </div>
  );
}

这里每次输入时，React会更新Virtual DOM，diff后只更新<p>的文本内容——和直接操作看起来差不多，但如果页面上有更多关联更新（比如同步修改多个元素），React的批量处理优势就会体现出来。

总结一下：Virtual DOM不是“比单次DOM操作快”，而是通过用廉价的JS操作替代昂贵的DOM操作，再加上批量更新、最小化DOM修改次数，在绝大多数应用场景下实现了性能提升。

内容的提问来源于stack exchange，提问作者Lemons34