当前位置：首页 > React

react底层实现

2026-01-26 14:33:26React

React 底层实现原理

React 的底层实现涉及多个核心机制，包括虚拟 DOM、协调算法（Reconciliation）、Fiber 架构等。以下是关键实现细节：

虚拟 DOM 与 Diff 算法

React 通过虚拟 DOM（Virtual DOM）实现高效的 UI 更新。虚拟 DOM 是一个轻量级的 JavaScript 对象，表示真实 DOM 的抽象。当状态变化时，React 会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（Diffing 算法），计算出最小变更集（最小 DOM 操作），最后批量更新真实 DOM。

Diff 算法的优化策略：

react底层实现

同级比较：默认逐层对比，不跨层级移动节点。
Key 优化：通过 key 标识节点身份，减少不必要的重新渲染。
类型比对：如果节点类型不同（如 div 变为 span），直接销毁并重建子树。

Fiber 架构

React 16 引入 Fiber 架构，将渲染任务拆分为可中断的单元（Fiber 节点），支持异步渲染和优先级调度。每个 Fiber 节点对应一个虚拟 DOM 节点，包含以下信息：

节点类型（组件、DOM 元素等）
子节点、兄弟节点、父节点的引用
状态（props、state、副作用标记）

Fiber 的核心流程分为两个阶段：

react底层实现

协调阶段（Render Phase）：生成 Fiber 树，标记需要更新的节点（可中断）。
提交阶段（Commit Phase）：将变更应用到真实 DOM（同步执行）。

事件系统

React 实现了一套合成事件系统（SyntheticEvent），对原生事件进行封装，提供跨浏览器的一致性。事件委托到根容器（如 document 或 root），通过事件池机制优化性能。

组件更新机制

函数组件：通过闭包保存 props 和 state，每次渲染都是独立快照。
类组件：实例化后维护生命周期状态，通过 setState 触发更新。
Hooks：通过链表结构管理 Hook 状态（如 useState 的队列），依赖调用顺序保证稳定性。

性能优化策略

批量更新：合并多次 setState 调用，减少渲染次数。
时间切片（Scheduler）：将任务分片执行，避免长时间阻塞主线程。
Memoization：通过 React.memo、useMemo 避免不必要的计算。

关键代码结构示例

以下是简化版的 Fiber 节点定义（非实际源码）：

type Fiber = {
  tag: WorkTag, // 组件类型（函数/类组件等）
  key: null | string,
  elementType: any,
  type: any, // DOM 节点类型或组件构造函数
  stateNode: any, // 关联的真实 DOM 或组件实例
  return: Fiber | null, // 父节点
  child: Fiber | null, // 第一个子节点
  sibling: Fiber | null, // 兄弟节点
  memoizedProps: any, // 上次渲染的 props
  memoizedState: any, // 上次渲染的 state
  flags: Flags, // 副作用标记（如插入、删除、更新）
};

公式与算法示例

Diff 算法的时间复杂度优化基于以下假设：

树比较的复杂度为 O(n^3)，React 通过启发式规则降至 O(n)。
Key 的比较遵循以下条件： [ \text{oldNode.key} === \text{newNode.key} \land \text{oldNode.type} === \text{newNode.type} ] 若成立则复用节点，否则销毁重建。

React 的底层实现结合了声明式编程、函数式理念和性能优化策略，为开发者提供了高效的 UI 开发体验。