当前位置：首页 > React

react源码实现

2026-01-26 14:03:06React

React 源码实现分析

React 的核心源码实现涉及虚拟 DOM、协调算法、组件生命周期等多个关键部分。以下是主要实现机制的解析：

虚拟 DOM 结构

React 使用虚拟 DOM 作为真实 DOM 的轻量级表示。虚拟 DOM 对象的基本结构如下：

{
  type: 'div',
  props: {
    className: 'container',
    children: [
      { type: 'span', props: { children: 'Hello' } },
      { type: 'button', props: { onClick: handler } }
    ]
  },
  key: null,
  ref: null
}

Fiber 架构

React 16+ 采用 Fiber 重构了核心算法：

将渲染工作拆分为可中断的小任务单元
每个 Fiber 节点对应一个虚拟 DOM 节点

包含链表结构维护工作进度：

function createFiber(element) {
return {
  type: element.type,
  props: element.props,
  stateNode: null,  // DOM节点
  child: null,      // 第一个子Fiber
  sibling: null,    // 兄弟Fiber
  return: null,     // 父Fiber
  alternate: null,  // 上一次渲染的Fiber
  effectTag: null   // 标记需要执行的DOM操作
}
}

协调算法（Diffing）

React 的 diff 算法遵循三个原则：

只比较同级元素
通过 key 属性识别稳定元素
元素类型变化时直接重建子树

function reconcileChildren(currentFiber, newChildren) {
  let oldFiber = currentFiber.alternate?.child
  let newFiber = null

  // 遍历子元素生成新Fiber链表
  while (newChildren.length > 0 || oldFiber != null) {
    // 比较新旧节点并打上effectTag
    // ...
  }
}

调度机制

React 使用 requestIdleCallback 的 polyfill 实现时间切片：

function workLoop(deadline) {
  while (nextUnitOfWork && deadline.timeRemaining() > 0) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
  }
  if (!nextUnitOfWork && pendingCommit) {
    commitAllWork(pendingCommit)
  }
  requestIdleCallback(workLoop)
}

事件系统

React 实现合成事件系统：

事件委托到 document 层
标准化浏览器事件差异
实现事件池优化性能

function dispatchEvent(event) {
  const path = getEventPath(event)
  const { type, target } = event

  // 从目标组件向上收集事件处理器
  const listeners = []
  for (let fiber of path) {
    const props = fiber.props
    const handler = props[`on${type}`]
    if (handler) listeners.push(handler)
  }

  // 按捕获到冒泡顺序执行
  executeDispatchesInOrder(event, listeners)
}

Hooks 实现

函数组件 hooks 基于闭包和链表存储状态：

let currentHook = null
let workInProgressHook = null
let isMount = true

function useState(initialState) {
  const hook = isMount 
    ? mountHook(initialState)
    : updateHook()

  const queue = hook.queue
  const dispatch = (action) => {
    queue.pending = action
    scheduleUpdate()
  }
  return [hook.state, dispatch]
}

function mountHook(initial) {
  const hook = {
    state: initial,
    queue: { pending: null },
    next: null
  }
  if (!workInProgressHook) {
    currentFiber.memoizedState = hook
  } else {
    workInProgressHook.next = hook
  }
  workInProgressHook = hook
  return hook
}