你可能会说
每次状态变化都重新渲染整个页面，不会很慢吗？
虚拟 DOM 是真实 DOM 的内存镜像——React 先在虚拟 DOM 上 Diff，再最小化更新真实 DOM，避免全量重绘。
React 在内存中维护一份页面的「副本」。数据变化时先对比副本找出差异，再只更新真正变了的 DOM 节点，比全量刷新快得多。
生活类比
像改作文时先复印一份，在复印件上标出要改的地方，最后只改标出来的几处，不用重抄全文。
🎮 动手试试
👇 修改列表观察 Diff 结果
关于「虚拟 DOM」，以下哪个描述最准确？
你可以这样告诉 AI
帮我优化列表渲染性能：用 key 帮助 React 识别哪些项变了，避免不必要的重渲染，大列表用虚拟化。
真实 DOM 操作很慢（触发重排），虚拟 DOM 在内存中计算差异后批量更新。
Shadow DOM 是浏览器原生的样式隔离机制（Web Components），和 React 虚拟 DOM 无关。
理解 React 性能
了解虚拟 DOM 的 Diff 机制能帮你写出更高效的代码：用 key 帮 React 识别变化，避免不必要的重渲染。
和 AI 协作时
想让 AI 优化列表时，直接说「每个列表项加唯一 key，避免用 index 做 key，大列表用虚拟滚动」。
性能敏感场景
高频更新的可视化（如实时图表、游戏）虚拟 DOM 的 Diff 开销反而拖后腿，直接用 Canvas 或 WebGL。
与 React 无关的项目
用 Vue、Svelte、原生 JS 的项目各有自己的更新机制，不需要关心 React 虚拟 DOM。
React 在内存中维护一份页面的「副本」。数据变化时先对比副本找出差异，再只更新真正变了的 DOM
像改作文时先复印一份，在复印件上标出要改的地方，最后只改标出来的几处，不用重抄全文。
和 AI 沟通时提到「用虚拟 DOM 高效更新」，就是让它不要每次重画整个页面。