当前位置：首页 > React

react 底层实现

2026-01-26 12:46:51React

React 底层实现原理

React 的核心设计理念基于虚拟 DOM（Virtual DOM）和组件化架构，其底层实现涉及多个关键机制。以下从核心机制、协调算法、事件系统等方面解析 React 的底层实现。

虚拟 DOM 与 Diff 算法

虚拟 DOM 是 React 性能优化的核心，通过 JavaScript 对象模拟真实 DOM 结构。当状态变更时，React 会生成新的虚拟 DOM 树，与旧树进行对比（Diffing），计算出最小变更集（Reconciliation），最后批量更新真实 DOM。

Diff 算法采用同级比较策略：

节点类型不同时直接替换整个子树。
节点类型相同时更新属性。
列表节点通过 key 标识优化复用。

// 虚拟 DOM 结构示例
{
  type: 'div',
  props: {
    className: 'container',
    children: [
      { type: 'h1', props: { children: 'Title' } },
      { type: 'p', props: { children: 'Content' } }
    ]
  }
}

Fiber 架构

React 16 引入 Fiber 架构，将渲染过程拆分为可中断的异步任务单元（Fiber Node），解决大规模应用卡顿问题。每个 Fiber 节点包含：

type：组件类型（函数/类/原生标签）。
stateNode：对应的真实 DOM 或组件实例。
return、child、sibling：构成 Fiber 树的链表结构。

工作循环（Work Loop）：

通过 requestIdleCallback 分片执行任务。
分为 render 和 commit 两个阶段：
- render 阶段生成 Fiber 树，可中断。
- commit 阶段同步更新 DOM，不可中断。

事件系统

React 实现了一套合成事件（SyntheticEvent）系统，将所有事件委托到顶层容器（如 document），通过事件池机制优化性能：

统一事件对象，抹平浏览器差异。
自动绑定 this，避免手动绑定。
事件池复用减少垃圾回收。

// 事件委托示例
document.addEventListener('click', (nativeEvent) => {
  const syntheticEvent = createSyntheticEvent(nativeEvent);
  dispatchEvent(syntheticEvent); // 触发组件事件处理
});

Hooks 实现

Hooks 通过闭包和链表管理状态，底层依赖 dispatcher 切换当前渲染的 Fiber 节点：

useState/useReducer：状态存储在 Fiber 节点的 memoizedState 链表。
useEffect：副作用保存在 updateQueue，在 commit 阶段执行。
规则依赖调用顺序，因为链表通过顺序匹配状态。

// 简化版 useState 实现
let currentDispatcher;
function useState(initialState) {
  const dispatcher = currentDispatcher;
  return dispatcher.useState(initialState);
}