真实 DOM 与虚拟 DOM

真实 DOM 是浏览器维护的树形结构，每次修改都会触发浏览器的样式计算、布局和绘制，开销较大。

虚拟 DOM 是 React 在内存中维护的普通 JS 对象，是真实 DOM 的轻量抽象。

// JSX 编译后的虚拟 DOM 对象
const vdom = {
  type: 'div',
  props: { className: 'box' },
  children: [{ type: 'p', props: {}, children: ['Hello'] }],
}

一、更新流程

数据变化时，React 的处理步骤：

1. 生成新的虚拟 DOM 树
2. 与旧树做 diff 对比
3. 计算出最小变更集
4. 一次性批量更新真实 DOM

二、对比

三、虚拟 DOM 的局限

• 额外内存开销：需要在内存中保存整棵虚拟 DOM 树
• 首次渲染略慢：比直接写 HTML 多一次 diff
• 简单场景过重：静态页面用虚拟 DOM 是过度设计

四、React 的相关优化

// key 帮助 diff 识别列表节点身份，避免错误复用
function List({ items }: { items: string[] }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  )
}

• React.memo / PureComponent：props 不变跳过渲染
• key：列表 diff 时精准复用节点
• 批量更新：多次 setState 合并为一次渲染

核心逻辑

虚拟 DOM 不是"更快"，而是在开发体验（声明式）和性能（批量更新）之间取得平衡。它的价值在于让开发者不用手动管理 DOM，由框架统一计算最优更新路径。