从零手写实现 React 18 核心架构，深入理解 Fiber、并发模式与调度机制
本项目是对 React 18 核心架构的学习版实现，旨在深入理解 React 的底层原理。通过从零构建 Fiber 架构、并发更新机制、优先级调度系统等核心特性，全面掌握 React 的运行机制。
项目同时配套了 20 篇 React 18 源码解析文档，从 createRoot().render() 主流程一路拆到 Fiber、Lane、Hooks、Diff、Commit、Scheduler、Context、Ref、HostConfig，最后补充源码阅读路线与设计哲学总结。
- 完整的 Fiber 树数据结构
- 双缓冲机制（Double Buffering）
- 可中断、可恢复的渲染流程
- 递归阶段（Reconciliation）实现
- 时间切片：可中断渲染，避免长时间阻塞主线程
- 优先级调度：基于 Lane 模型的优先级系统
- 任务调度器：集成 Scheduler 实现任务调度
- ✅
useState- 状态管理 - ✅
useEffect- 副作用处理 - ✅
useRef- 引用管理 - ✅
useContext- 上下文消费 - ✅
useTransition- 过渡更新
- Context API -
createContext跨组件通信 - 合成事件系统 - 事件委托、冒泡/捕获机制
- Update Queue - 批量更新与优先级合并
- Diff 算法 - 单节点与多节点 Diff 策略
react18_ori/
├── packages/
│ ├── react/ # React 核心包
│ │ └── src/
│ │ ├── context.ts # Context API
│ │ ├── currentDispatcher.ts # Hooks 调度器
│ │ ├── currentBatchConfig.ts# 批处理配置
│ │ └── jsx.ts # JSX 转换
│ │
│ ├── react-dom/ # DOM 渲染器
│ │ └── src/
│ │ ├── hostConfig.ts # 宿主配置
│ │ ├── root.ts # 根节点管理
│ │ └── SyntheticEvent.ts # 合成事件系统
│ │
│ ├── react-reconciler/ # 协调器（核心）
│ │ └── src/
│ │ ├── fiber.ts # Fiber 数据结构
│ │ ├── fiberHooks.ts # Hooks 实现
│ │ ├── fiberLanes.ts # 优先级模型
│ │ ├── fiberReconciler.ts # 协调算法
│ │ ├── workLoop.ts # 工作循环
│ │ ├── beginWork.ts # 递阶段
│ │ ├── completeWork.ts # 归阶段
│ │ ├── commitWork.ts # 提交阶段
│ │ └── updateQueue.ts # 更新队列
│ │
│ └── shared/ # 共享工具层
│
├── demos/ # 示例演示
│ ├── context/ # Context 示例
│ ├── ref/ # Ref 示例
│ ├── test-fc/ # 函数组件示例
│ └── transition/ # Transition 示例
│
├── docs/
│ └── react18-core/ # React 18 源码解析系列文档（00-19）
│
└── scripts/ # 构建脚本
所有源码解析文档位于 docs/react18-core，建议按编号顺序阅读。
| 阶段 | 文档 | 你会理解什么 |
|---|---|---|
| 总览 | 00-系列总览 | 全系列结构、源码模块与学习顺序 |
| 主流程 | 01-createRoot-render主流程 | 一次 createRoot().render() 从入口到调度的完整链路 |
| Fiber 基础 | 02-Fiber数据结构与双缓冲 | Fiber 节点、FiberRoot、current / workInProgress 双缓冲 |
| 状态更新 | 03-UpdateQueue环状链表与状态计算 | UpdateQueue、环状链表、状态计算与低优先级跳过 |
| 优先级调度 | 04-Lane模型与优先级调度 | Lane 位图、优先级合并、选择与完成标记 |
| render 阶段 | 05-render阶段beginWork与completeWork | beginWork 递阶段、completeWork 归阶段、flags 收集 |
| Diff 算法 | 06-Diff算法key复用插入删除 | 单节点、多节点、key 复用、插入、移动和删除 |
| commit 阶段 | 07-Commit阶段mutation-layout-passive | mutation、layout、passive 三类副作用执行时机 |
| Hooks 主线 | 08-Hooks原理dispatcher与Hook链表 | dispatcher、Hook 链表、mount/update 分流 |
| Hooks 状态 | 09-useState源码dispatch与更新队列 | useState、dispatch、更新入队与状态计算 |
| Hooks 副作用 | 10-useEffect源码effect链表与执行时机 | effect 链表、依赖比较、销毁与创建时机 |
| 并发体验 | 11-useTransition源码TransitionLane | useTransition 如何把更新降级到 TransitionLane |
| 事件系统 | 12-合成事件系统事件委托与优先级 | 事件委托、捕获/冒泡路径、事件优先级 |
| Context | 13-Context源码Provider栈与useContext | Provider 栈、useContext 读取与嵌套恢复 |
| JSX | 14-JSX到ReactElement再到Fiber | JSX、ReactElement、Fiber 创建之间的关系 |
| Renderer | 15-HostConfig渲染器适配层 | Reconciler 如何通过 HostConfig 适配 DOM |
| Scheduler | 16-Scheduler同步队列与时间切片 | 同步队列、微任务、Scheduler 回调、时间切片 |
| Ref | 17-Ref源码commit阶段解绑与绑定 | ref 在 commit 阶段的解绑与绑定流程 |
| 调试指南 | 18-React18源码阅读路线与调试指南 | 推荐阅读路径、调试入口和断点位置 |
| 设计哲学 | 19-React18设计哲学与框架设计启示 | 从本仓库实现反推 React 的设计哲学，以及官方源码中仍值得学习的原则 |
先跑 demo 建立直觉
↓
读 01 主流程，知道一次更新怎么从 API 进入源码
↓
读 02-07，理解 Fiber / Lane / render / commit 主干
↓
读 08-13，理解 Hooks、事件和 Context 等用户侧能力
↓
读 14-17，补齐 JSX、HostConfig、Scheduler、Ref 等支线
↓
读 18-19，形成源码阅读方法和框架设计视角
| 技术 | 用途 |
|---|---|
| TypeScript | 类型安全与代码提示 |
| Rollup | 模块打包 |
| Vite | 开发服务器 & 快速预览 |
| Jest | 单元测试 |
| ESLint + Prettier | 代码规范 |
| Husky + Commitlint | Git 工作流规范 |
Fiber 是 React 16+ 的核心架构，每个 Fiber 节点对应一个组件：
interface FiberNode {
type: any; // 组件类型
key: null | string; // 子节点标识
child: FiberNode | null; // 第一个子节点
sibling: FiberNode | null; // 兄弟节点
return: FiberNode | null; // 父节点
memoizedState: any; // 状态/Hooks链表
updateQueue: any; // 更新队列
flags: Flags; // 副作用标记
// ...更多属性
}React 18 引入 Lane 模型替代 expirationTime：
// 优先级从高到低
SyncLane = 0b00001 // 同步优先级（用户输入）
InputContinuousLane = 0b00010 // 连续输入
DefaultLane = 0b00100 // 默认优先级
TransitionLane = 0b01000 // 过渡优先级
IdleLane = 0b10000 // 空闲优先级scheduleUpdateOnFiber → ensureRootIsSchedule
↓
优先级判断
↓
┌─────────┐
│ 同步? │→ 微任务调度 (performSyncWorkOnRoot)
└─────────┘
┌─────────┐
│ 异步? │→ 宏任务调度 (performConcurrentWorkOnRoot)
└─────────┘
↓
renderRoot (可中断)
↓
commitRoot (不可中断)
Hooks 通过链表数据结构存储在 Fiber 节点的 memoizedState 属性中：
Fiber.memoizedState → Hook1 → Hook2 → Hook3 → null
↓
updateQueue
pnpm install# 运行 Context 示例
pnpm demo
# 运行其他示例需要修改 package.json 中的 demo 命令
# 例如：vite serve demos/transition --config scripts/vite/vite.config.js --forcepnpm build:devpnpm test| 功能 | 状态 | 说明 |
|---|---|---|
| Fiber 架构 | ✅ | 已实现核心数据结构与双缓冲流程 |
| Hooks (useState/useEffect/useRef/useContext/useTransition) | ✅ | 已实现核心 Hooks |
| 并发更新 | ✅ | 时间切片 + 可中断渲染雏形 |
| 优先级调度 | ✅ | Lane 模型 + Scheduler 集成 |
| 合成事件 | ✅ | 事件委托 + 冒泡/捕获 |
| Context API | ✅ | createContext / Provider / useContext |
| Diff 算法 | ✅ | 单节点/多节点 Diff |
| 源码解析文档 | ✅ | 20 篇文档覆盖主流程、核心模块、调试路线与设计哲学 |
| Suspense | ⏳ | 待实现 |
| Server Component | ⏳ | 待实现 |
欢迎提交 Issue 和 Pull Request！
如果这个项目对你有帮助，请给一个 ⭐️ Star 支持一下！
Made with ❤️ for learning React internals