当前位置：首页 > React

react底层实现原理

2026-01-27 01:56:28React

React 底层实现原理

React 的核心原理涉及虚拟 DOM、协调算法（Reconciliation）、Fiber 架构等关键技术。以下从多个维度解析其底层实现机制。

虚拟 DOM 与 Diff 算法

React 通过虚拟 DOM（Virtual DOM）抽象真实 DOM，提升渲染性能。虚拟 DOM 是一个轻量级的 JavaScript 对象，描述组件树的结构。当状态变化时，React 会生成新的虚拟 DOM 树，并通过 Diff 算法对比新旧树的差异。

Diff 算法基于以下策略：

同层比较：仅对比同一层级的节点，避免跨层级遍历。
Key 优化：通过 key 属性识别节点的稳定性，减少不必要的重新渲染。
类型比对：若节点类型不同（如 div 变为 span），直接销毁并重建子树。

// 虚拟 DOM 示例结构
const vdom = {
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: {}, children: 'Hello World' }
  ]
};

Fiber 架构与调度机制

React 16 引入 Fiber 架构，将渲染任务拆分为可中断的单元（Fiber 节点），支持优先级调度和时间切片（Time Slicing）。每个 Fiber 节点包含以下信息：

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

工作循环（Work Loop）： Fiber 调度器通过 requestIdleCallback 或手动模拟实现异步渲染。任务分为两个阶段：

Render 阶段：生成 Fiber 树并标记副作用（如 DOM 更新），可中断。
Commit 阶段：同步执行 DOM 操作，不可中断。

组件渲染与更新流程

初始化渲染：
- 调用 ReactDOM.render() 创建根 Fiber 节点。
- 递归构建 Fiber 树，触发组件的 render 方法生成虚拟 DOM。
- 提交阶段将差异应用到真实 DOM。
状态更新：
- 调用 setState 或触发 Hooks 更新，标记 Fiber 节点为“待更新”。
- 调度器协调更新任务，重新执行 Render 阶段生成新 Fiber 树。
- 通过双缓冲技术（current 和 workInProgress 树）避免渲染过程中的视觉不一致。

事件系统

React 实现合成事件（SyntheticEvent）机制，将所有事件委托到文档根节点，并通过事件池优化性能。合成事件提供跨浏览器一致性，并自动处理事件冒泡和捕获。

// 合成事件示例
function handleClick(e) {
  e.preventDefault(); // 跨浏览器兼容
  console.log(e.nativeEvent); // 原生事件
}

Hooks 实现原理

Hooks 依赖 Fiber 节点的 memoizedState 链表存储状态。每次调用 Hook 时，React 根据当前执行位置读取或更新链表中的状态值。

useState：基于 dispatcher 分发更新，触发重新渲染。
useEffect：在 Commit 阶段后异步调度副作用，依赖项比对通过 Object.is 实现。

// Hooks 的链表存储结构
let currentFiber = {
  memoizedState: {
    memoizedState: 'state', // useState 的值
    next: { // 下一个 Hook
      memoizedState: null, // useEffect 的依赖
      next: null
    }
  }
};