面试官又问我是否了解虚拟DOM？

一、虚拟 DOM 的本质是什么？

虚拟dom 本质上就是一个普通的js对象 ，用于描述真实 DOM 的结构、属性和状态。

虚拟dom最早是由react团队提出的，是一种编程概念；

rust 复制代码

// 示例：一个虚拟 DOM 节点的结构
const vNode = {
  type: 'div',             // 标签名或组件类型
  props: {                 // 属性对象
    className: 'container',
    onClick: handleClick,
    style: { color: 'red' },
  },
  children: [              // 子节点（可以是文本、其他虚拟 DOM 节点）
    'Hello World',
    { type: 'span', props: {}, children: [] },
  ],
  key: 'unique-id',        // 用于 Diff 算法的唯一标识
  ref: null,               // 引用真实 DOM 的指针
  // ... 其他内部元数据（如 Fiber 节点信息）
};

二、为什么出现虚拟DOM

相较于真实DOM的速度优势：
- 首先操作JS对象 要比操作DOM对象要快的多（注意这里没有说虚拟DOM比真实DOM快这种说法）。
- 虚拟DOM的优势真正体现在了更新的过程中。第一次渲染时，虚拟DOM并没有什么优势，因为描述完成DOM对象之后，还是需要使用原生DOM的API去操作DOM。虚拟DOM的优势是在更新阶段， 如果使用原生DOM对象更新时，需要全部重新赋值，这意味着之前的创建的DOM节点需要全部销毁掉，然后再重新进行创建并渲染（计算、布局、绘制、栅格化、合成一系列任务），触发完整渲染流水线，牵一发而动全身；而虚拟DOM是只需要更新必要的DOM节点的属性，批量更新，合并多次修改，再把这些变化一次性应用到真实的 DOM 上。

多平台的渲染抽象能力：
- 虚拟DOM只是对真实UI的一个描述，根据不同的宿主环境，调用不同的渲染API执行不同的渲染代码，实现跨平台的能力。比如浏览器或者nodejs环境使用ReactDOM包，Native使用ReactNative包。

三、虚拟DOM全生命周期流程

初始化阶段
- JSX → Babel 编译 → React.createElement() → 虚拟 DOM 树
- 递归转换为真实 DOM 节点
- 挂载到容器节点（ReactDOM.render()）
更新阶段
- 状态变更触发新虚拟 DOM 树生成
- 新旧树进行深度优先比对（Reconciliation）
- 生成最小化 DOM 操作指令队列
- 批量执行 DOM 更新（Commit Phase）
销毁阶段
- 组件卸载触发虚拟 DOM 树解构
- 递归移除关联的真实 DOM 节点
- 释放事件监听器等资源

四、React中的虚拟DOM

在react中通过JSX来描述UI，实际上是React.creatElement（） 方法的语法糖。调用这个方法之后就会得到虚拟DOM对象。

javascript 复制代码

// 原始 JSX
const element = <div className="title">Hello</div>;

// Babel 转换后
const element = React.createElement(
  'div', 
  { className: 'title' }, 
  'Hello'
);

// 生成的虚拟 DOM
{
  type: 'div',
  props: { className: 'title' },
  children: ['Hello'],
  // ...其他元数据
}

本章主要是对虚拟DOM的解释，具体的细节本篇文章中不需要太深究，比如React对虚拟DOM的描述JS对象，Stack架构和Fiber架构中是不同的。