react如何实现虚拟dom

React 虚拟 DOM 的实现原理

React 的虚拟 DOM（Virtual DOM）是一种内存中的轻量级 DOM 表示，用于高效更新真实 DOM。以下是其核心实现机制：

虚拟 DOM 的结构

虚拟 DOM 是一个 JavaScript 对象树，模拟真实 DOM 的层次结构。每个节点包含标签名、属性和子节点信息。例如：

const virtualNode = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello World'
        }
      }
    ]
  }
}

Diff 算法

React 通过 Diff 算法比较新旧虚拟 DOM 树的差异：

• 分层比较：只比较同一层次的节点
• 节点类型比对：如果节点类型不同直接替换整个子树
• Key 值优化：列表项通过 key 值识别移动而非重新创建

差异更新（Reconciliation）

计算出差异后生成最小化的 DOM 操作指令：

• 对于属性变化：调用 setAttribute 或 removeAttribute
• 对于文本变化：直接更新 textContent
• 对于结构变化：使用 appendChild/removeChild 等方法

批量更新策略

React 采用批处理机制将多个状态更新合并为单次渲染：

• 避免频繁的 DOM 操作
• 使用事件循环机制在合适的时机批量执行更新

Fiber 架构优化

React 16+ 引入的 Fiber 架构改进：

• 将渲染工作拆分为可中断的小任务
• 实现优先级调度和渐进式渲染
• 维护双缓存树结构（current 和 workInProgress）

性能优化示例

通过 shouldComponentUpdate 或 React.memo 避免不必要的渲染：

const MemoComponent = React.memo(function MyComponent(props) {
  // 只有 props 变化时才会重新渲染
  return <div>{props.value}</div>;
});

这种虚拟 DOM 机制使得 React 能够以声明式方式高效更新界面，开发者无需手动操作 DOM 即可获得良好的性能表现。