当前位置：首页 > news >正文

React 原理篇 - 深入理解虚拟 DOM

news 2025/9/14 5:15:39

一、什么是虚拟 DOM？

在前端开发中，“虚拟 DOM” 是一个高频出现的术语，尤其在 React 生态中被广泛讨论。但很多开发者对它的理解往往停留在 “JS 对象” 这个表层认知上。

实际上，虚拟 DOM 是一种编程概念—— 在这个概念里，UI 以一种理想化的、“虚拟的” 表现形式被保存于内存中。它本质上是对真实 DOM 的一种描述，而不是具体的实现。

React 官方文档对虚拟 DOM 的定义是：“一种编程概念，UI 以一种理想化的，或者说 ’ 虚拟的 ’ 表现形式被保存于内存中”。这意味着，只要能描述真实 DOM 的层次结构，无论采用何种形式（JSON、XML 等），都可以称为虚拟 DOM。而 React 选择了JS 对象作为这种思想的具体实现。

二、为什么需要虚拟 DOM？

在深入了解虚拟 DOM 的工作原理前，我们先思考一个问题：为什么需要虚拟 DOM？它解决了什么痛点？

2.1 性能优化：减少 DOM 操作成本

浏览器操作 DOM 的成本非常高，主要原因有两点：

DOM 对象包含大量属性和方法（远多于普通 JS 对象）
DOM 操作会触发浏览器的重排（Reflow）和重绘（Repaint）

相比之下，JS 层面的计算成本要低得多。通过先在 JS 层面对虚拟 DOM 进行计算和比对，再映射到真实 DOM，可以大幅减少不必要的 DOM 操作。

虚拟 DOM 的优势在更新阶段尤为明显 —— 它避免了全量销毁重建 DOM 的昂贵操作，只做必要的修改。

2.2 跨平台渲染能力

虚拟 DOM 最大的价值之一是提供了平台无关性。它将 UI 描述与具体渲染逻辑分离，使得同一套代码可以在不同平台渲染：

浏览器环境：通过 ReactDOM 渲染为 DOM
移动设备：通过 React Native 渲染为原生组件
服务端：通过 ReactDOMServer 渲染为字符串
测试环境：直接渲染为 JS 对象进行断言

这种抽象能力完美契合了 “一次编写，多端运行” 的现代开发需求。

三、React 中的虚拟 DOM 实现

在 React 中，虚拟 DOM 以 “React 元素” 的形式存在。让我们从 JSX 开始，一步步揭开它的面纱。

3.1 JSX 与 createElement 的关系

我们编写的 JSX 代码：

<h1 className="title" id="header">Hello, Virtual DOM!<span>React</span>
</h1>

会被 Babel 编译为 createElement 方法的调用：

React.createElement('h1',{ className: 'title', id: 'header' },'Hello, Virtual DOM!',React.createElement('span', null, 'React')
)

这个方法最终会返回一个描述 DOM 结构的 JS 对象 —— 这就是 React 中的虚拟 DOM：

{$$typeof: Symbol(react.element),type: 'h1',key: null,ref: null,props: {className: 'title',id: 'header',children: ['Hello, Virtual DOM!',{$$typeof: Symbol(react.element),type: 'span',// ... 其他属性}]},_owner: null
}

3.2 createElement 核心逻辑解析

React 的 createElement 函数主要做了四件事：

处理属性（过滤保留字、提取 key 和 ref）
处理子元素（支持多个子节点，转为数组）
合并默认属性（defaultProps）
创建并返回 React 元素对象

简化版实现如下：

function createElement(type, config, children) {const props = {};let key = null;let ref = null;// 处理配置属性if (config) {key = config.key || null;ref = config.ref || null;// 复制非保留字属性到 propsfor (const prop in config) {if (config.hasOwnProperty(prop) && !RESERVED_PROPS.hasOwnProperty(prop)) {props[prop] = config[prop];}}}// 处理子元素const childrenLength = arguments.length - 2;if (childrenLength === 1) {props.children = children;} else if (childrenLength > 1) {props.children = Array.from(arguments).slice(2);}// 合并默认属性if (type && type.defaultProps) {for (const prop in type.defaultProps) {if (props[prop] === undefined) {props[prop] = type.defaultProps[prop];}}}return {$$typeof: REACT_ELEMENT_TYPE,type,key,ref,props,_owner: null};
}