请解释 React 中的 Virtual DOM 是什么，它的主要作用是什么？并且比较 Virtual DOM 与真实 DOM 的优势。
考察说明
考查对 React 核心概念 Virtual DOM 的理解及其与真实 DOM 的性能差异。
回答思路
- 【回答框架 1】Virtual DOM 是真实 DOM 的 JavaScript 对象表示，轻量且独立于浏览器实现。React 用组件渲染生成 Virtual DOM 树，更新时先修改 Virtual DOM，再通过 diff 算法对比新旧 Virtual DOM，计算出最小变更集，最后批量更新真实 DOM。
- 【回答框架 2】作用在于将声明式 UI 与命令式 DOM 操作解耦，开发者描述期望的 UI 状态，React 负责协调更新。通过 diff 和批量更新减少对真实 DOM 的直接操作，降低重排和重绘开销。
- 【回答框架 3】与真实 DOM 相比，Virtual DOM 的优势主要有：批量更新减少 DOM 操作次数；跨平台能力，Virtual DOM 可映射到不同渲染目标（如 React Native）；diff 算法提升更新效率。但需注意，Virtual DOM 并非永远更快，其性能取决于实际场景。
- 【关键点 1】Virtual DOM 是轻量 JavaScript 对象，模拟 DOM 结构。
- 【关键点 2】React 更新过程：渲染 Virtual DOM，diff 对比，批量更新真实 DOM。
- 【关键点 3】优势：减少直接 DOM 操作、跨平台、声明式开发。
- 【关键点 4】Virtual DOM 优化的是更新策略，而非必然绝对性能提升。
- 【易错点 1】误认为 Virtual DOM 绝对比真实 DOM 快，应强调避免不必要的更新。
- 【易错点 2】忽略 Virtual DOM 本身有内存和计算开销，在极小页面中可能不如直接操作。
- 【易错点 3】将 Virtual DOM 与 Shadow DOM 混淆，两者实现和目的不同。