React虚拟Dom - 技术栈

虚拟Dom本质上是一个Javascript对象 ，它用来描述真实网页中Dom树的结构和属性 ，它是轻量级 的，存在于内存中，操作成本远低于真实Dom

○真实 Dom 的增删改查 会触发浏览器的【重排（Reflow）】和【重绘（Repaint）】，频繁操作会导致性能损耗；

○而虚拟 Dom 是JS对象 ，操作成本极低，React通过对比新旧 虚拟Dom的差异，只更新需要变化的真实Dom，避免全局污染

虚拟 DOM 是「平台无关」的抽象 ：React 只需实现不同平台的「渲染器 （Renderer）」，就能将虚拟 DOM 映射到不同环境：

开发者只需描述「UI 应该是什么样」 （如 JSX），无需关心「如何操作 DOM」（如原生 JS 的appendChild/removeChild），React 通过虚拟 DOM 自动处理 DOM 更新的细节，降低心智负担

思路：用JS对象模拟Dom，状态变化时，先在JS对象 上计算和比较，找出最小差异 ，然后再将这些差异批量更新到真实Dom

React 围绕虚拟 DOM 的更新流程分为三步：创建 → 对比（Diff） → 更新

JSX 是创建虚拟 DOM 的「语法糖」，最终会被 Babel 编译为React.createElement调用，生成虚拟 DOM：

javascript 复制代码

// 写的JSX
<div id="app">Hello</div>

// 编译后（简化版）
React.createElement('div', { id: 'app' }, 'Hello');

// 执行后返回虚拟DOM对象（即上文的vdom）

当组件的state/props变化时，React 会生成新的虚拟 DOM，通过「Diff 算法」对比新旧虚拟 DOM 的差异，找出「最小更新集」。Diff 算法的核心策略：

React 将 Diff 找到的差异「批量应用」到真实 DOM，且更新过程是异步的（如合成事件中setState会批量执行），进一步优化性能。

维度	具体价值
性能	减少不必要的真实 DOM 操作，保证复杂场景下的性能下限（而非 "绝对更快"）
开发效率	声明式编程，无需关注 DOM 操作细节，专注业务逻辑
跨平台	一套虚拟 DOM 逻辑适配多端，降低多端开发成本
可维护性	统一的更新逻辑，便于调试和扩展（如 Fiber、并发更新）

❌ 误区 1："虚拟 DOM 比直接操作真实 DOM 更快"
✅ 真相：简单场景下（如单次更新一个节点），直接操作真实 DOM 可能更快；虚拟 DOM 的价值是「在复杂场景下避免开发者写出低效的 DOM 操作」，保证性能稳定性。
❌ 误区 2："Diff 算法是最优的"
✅ 真相：Diff 算法是「权衡后的最优解」，因为实际业务中跨层级操作极少，牺牲小部分最优性换来了时间复杂度的大幅降低。
❌ 误区 3："React 16 + 的 Fiber 替换了虚拟 DOM"
✅ 真相：Fiber 是对虚拟 DOM 执行流程的优化（将 Diff 拆分为可中断的小任务），而非替换虚拟 DOM，核心仍依赖虚拟 DOM 的抽象。