深入理解React虚拟Dom

一、虚拟 DOM（Virtual DOM）的核心定义

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

二、虚拟 DOM 的核心设计目的

1、解决真实DOM操作的性能痛点

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

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

2. 支撑跨平台能力

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

• React DOM：映射到浏览器真实 DOM；
• React Native：映射到移动端原生组件（如 View 对应 iOS 的 UIView、Android 的 TextView）；
• React SSR：映射到服务端 HTML 字符串；

3. 实现声明式编程模型

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

三、虚拟 DOM 的核心工作流程

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

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

1. 初始化：生成虚拟 DOM

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

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

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

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

2. 更新：Diff 算法对比新旧虚拟 DOM

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

• 层级比较：只对比同层级节点，跨层级节点直接删除重建
• 同类型节点比较：
  • 标签节点：对比属性（如id/className），只更新变化的属性
  • 文本节点：直接对比文本内容，不同则更新
• 列表节点 key：列表渲染时通过key标识唯一节点，避免错位更新
• 组件节点比较：类型相同则更新 props，递归对比组件内部子 VNode

3. 渲染：批量更新真实 DOM

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

四、虚拟 DOM 的核心优势（澄清常见误区）

1. 优势总结

2. 常见误区澄清

• ❌ 误区 1：“虚拟 DOM 比直接操作真实 DOM 更快”
• ✅ 真相：简单场景下（如单次更新一个节点），直接操作真实 DOM 可能更快；虚拟 DOM 的价值是「在复杂场景下避免开发者写出低效的 DOM 操作」，保证性能稳定性。

• ❌ 误区 2：“Diff 算法是最优的”
• ✅ 真相：Diff 算法是「权衡后的最优解」，因为实际业务中跨层级操作极少，牺牲小部分最优性换来了时间复杂度的大幅降低。

• ❌ 误区 3：“React 16 + 的 Fiber 替换了虚拟 DOM”
• ✅ 真相：Fiber 是对虚拟 DOM 执行流程的优化（将 Diff 拆分为可中断的小任务），而非替换虚拟 DOM，核心仍依赖虚拟 DOM 的抽象。

3、缺点

• a.额外的JavaScripti计算开销
• b.首次渲染的轻微延迟
• c.内存占用

到此这篇关于深入理解React虚拟Dom的文章就介绍到这了,更多相关React虚拟Dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论