Virtual DOM 是什么，React 为什么要使用它？

Virtual DOM (VDOM) 是一个轻量级的 JavaScript 对象树，用来描述 UI 应该看起来什么样。它是一个纯粹的内存表示——不是真实的浏览器 DOM。React 使用它是因为直接操作真实 DOM 很慢，而且在每次状态改变时手动操作容易出错。

工作原理

当状态改变时，React 不会立即触及页面。相反，它会：

1. 从你的组件构建一棵新的虚拟树。
2. 将它与上一个虚拟树进行对比（reconciliation）来计算最少的变更集合。
3. 在一个批处理更新中将这些变更应用到真实 DOM。

function Counter() {
  const [n, setN] = useState(0);
  // Each click produces a NEW virtual tree describing <button>{n}</button>.
  // React compares old vs new and updates ONLY the text node that changed,
  // not the whole button or the page.
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

因此你可以声明式地编写代码（"给定这个状态，UI 看起来是这样"），React 会为你计算出必要的命令式 DOM 操作。

为什么这很重要 / 权衡

• 更少的批处理 DOM 写操作 → 更少的昂贵 reflows/repaints。
• 声明式代码比手动 document.querySelector + 修改更容易理解。
• 它不是魔法般地"比 DOM 快"——diffing 本身需要消耗 CPU。真正的好处是 React 避免了不必要的真实 DOM 操作，让你不再需要手工优化更新。列表中的稳定 keys 帮助 diff 保持高效。