Virtual DOM (VDOM) 是一个轻量级的 JavaScript 对象树,用来描述 UI 应该看起来什么样。它是一个纯粹的内存表示——不是真实的浏览器 DOM。React 使用它是因为直接操作真实 DOM 很慢,而且在每次状态改变时手动操作容易出错。
工作原理
当状态改变时,React 不会立即触及页面。相反,它会:
- 从你的组件构建一棵新的虚拟树。
- 将它与上一个虚拟树进行对比(reconciliation)来计算最少的变更集合。
- 在一个批处理更新中将这些变更应用到真实 DOM。
jsx
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 保持高效。
