React 源码面试冲刺计划
目标：应对资深前端面试（含源码问题） 周期：6-8 周（每天 1-2 小时）
🎯 面试考核维度
根据资深前端岗位要求，React 源码面试主要考这些：
| 维度 | 考察点 | 占比 |
|---|---|---|
| 核心原理 | Fiber、Reconciler、Commit 流程 | 25% |
| Diff 算法 | 对比策略、key 的作用 | 20% |
| Hooks 原理 | 状态管理、副作用、依赖优化 | 20% |
| 渲染优化 | memo、useMemo、useCallback | 15% |
| 并发模式 | Suspense、Transition、优先级 | 10% |
| 周边知识 | VDOM、函数式编程、工程化 | 10% |
🗓️ 完整学习计划（6 周）
第 1 周：React 基础架构 + API 能力
目标：理解 React 整体架构，熟练掌握所有 API
| 天数 | 主题 | 源码文件 | 面试点 |
|---|---|---|---|
| Day 1 | React 包入口与核心 API | packages/react/src/ 全部过一遍 | 常用 API 有哪些 |
| Day 2 | JSX 转换原理 | jsx/ReactJSXElement.js | jsx vs createElement |
| Day 3 | 组件定义方式 | ReactBaseClasses.js, ReactForwardRef.js | 函数组件 vs Class |
| Day 4 | Props 处理 | ReactElement.js, ReactPropTypes.js | props 传递与校验 |
| Day 5 | ref 实现 | ReactCreateRef.js, ReactForwardRef.js | ref 获取 DOM |
| Day 6 | context 原理 | ReactContext.js | 跨组件通信 |
| Day 7 | 本周总结 + 整理笔记 | — | 画架构图 |
📌 面试必问题：
- React 项目中有哪些核心包？各自职责是什么？
- 函数组件和 Class 组件的区别？
- 为什么 Hooks 不能在条件语句中调用？
第 2 周：Hooks 核心原理（重灾区！）
目标：彻底理解 Hooks 底层机制
| 天数 | 主题 | 源码文件 | 面试点 |
|---|---|---|---|
| Day 8 | Hooks 分发机制 | ReactHooks.js | Dispatcher 是什么 |
| Day 9 | useState 实现 | react-reconciler/ReactHooks.js | 状态如何存储 |
| Day 10 | useReducer 实现 | 同上 | 状态更新逻辑 |
| Day 11 | useEffect 实现 | 同上 | 副作用时机、清理函数 |
| Day 12 | useLayoutEffect vs useEffect | 同上 | 同步 vs 异步 |
| Day 13 | useRef 实现 | 同上 | ref 和 useState 的区别 |
| Day 14 | useMemo / useCallback | 同上 | 性能优化原理 |
📌 面试必问题：
- useState 的实现原理？什么是 Hooks 链表？
- useEffect 的执行时机？是同步还是异步？
- useEffect 依赖项为空数组和专业摄影棚有啥区别？
- useMemo 和 useCallback 有什么用？怎么用？
- 如何理解闭包陷阱？
第 3 周：Fiber 架构（最核心！）
目标：理解 React 16+ 的核心架构变革
| 天数 | 主题 | 源码文件 | 面试点 |
|---|---|---|---|
| Day 15 | Fiber 是什么 | react-reconciler/ReactFiber.js | 为什么叫 Fiber |
| Day 16 | Fiber 数据结构 | 同上 | 节点结构、child、sibling |
| Day 17 | 渲染阶段 WorkLoop | ReactFiberWorkLoop.js | render 阶段做了什么 |
| Day 18 | Commit 阶段 | 同上 | commit 阶段做了什么 |
| Day 19 | 任务调度 Scheduler | scheduler/src/Scheduler.js | 优先级如何确定 |
| Day 20 | 优先级机制 | ReactFiberLane.js | lanes、lanes 优先级 |
| Day 21 | 本周总结 + 整理笔记 | — | 画 Fiber 流程图 |
📌 面试必问题：
- 什么是 Fiber？解决了什么问题？
- React 的渲染流程是怎样的？render 和 commit 阶段的区别？
- 什么是协调（Reconciler）？做什么的？
- Scheduler 的作用？和浏览器的关系？
- 优先级是如何实现的？
第 4 周：Diff 算法（必考！）
目标：掌握 React 高效更新的核心算法
| 天数 | 主题 | 源码文件 | 面试点 |
|---|---|---|---|
| Day 22 | Diff 算法的整体思路 | react-reconciler/ReactFiberReconciler.js | O(n) 算法 |
| Day 23 | 对比策略：treeDiff | 同上 | 跨层级移动 |
| Day 24 | 对比策略：componentDiff | 同上 | 类型不同会怎样 |
| Day 25 | 对比策略：elementDiff | 同上 | key 的作用 |
| Day 26 | 列表对比优化 | 同上 | 为什么不能用 index 做 key |
| Day 27 | 双缓冲技术 | ReactFiber.js | current、workInProgress |
| Day 28 | 本周总结 | — | 能手写简单 Diff |
📌 面试必问题：
- React 的 Diff 算法是怎么工作的？
- 为什么要有 key？key 的作用是什么？
- 为什么不能用 index 作为 key？
- 什么是双缓冲？current 和 workInProgress 是什么关系？
第 5 周：并发与性能优化
目标：掌握 React 18 新特性 + 性能优化手段
| 天数 | 主题 | 源码文件 | 面试点 |
|---|---|---|---|
| Day 29 | Concurrent 模式 | ReactFiberWorkLoop.js | 并发渲染是什么 |
| Day 30 | startTransition | ReactStartTransition.js | 如何优化交互 |
| Day 31 | useDeferredValue | ReactHooks.js | 延迟渲染 |
| Day 32 | Suspense 原理 | ReactSuspense.js | 异步加载 |
| Day 33 | useSyncExternalStore | ReactHooks.js | 外部状态管理 |
| Day 34 | React.memo 原理 | ReactMemo.js | 浅比较 |
| Day 35 | 性能优化最佳实践 | — | 实际场景分析 |
📌 面试必问题：
- React 18 的并发是什么？带来了什么新特性？
- startTransition 和 useDeferredValue 的区别？
- Suspense 是怎么工作的؟
- 如何做性能优化？memo、useMemo、useCallback 怎么选？
第 6 周：周边知识 + 实战 + 面试模拟
| 天数 | 主题 | 内容 |
|---|---|---|
| Day 36 | 事件系统 | react-dom-bindings/src/events/ |
| Day 37 | 虚拟 DOM | 理解 VDOM 本质 |
| Day 38 | 函数式编程 | 纯函数、柯里化、组合 |
| Day 39 | 状态管理 | Redux、Zustand、Recoil 思路 |
| Day 40-42 | 动手实现 Mini React | 核心功能 200 行代码 |
| Day 43-44 | 常见面试题训练 | 整理高频题 |
| Day 45 | 模拟面试 | 自问自答录音 |
📚 源码重点章节优先级
⭐⭐⭐ 必须完全掌握
react-reconciler/src/
├── ReactFiberWorkLoop.js # 渲染循环（最重要！）
├── ReactFiberHooks.js # Hooks 实现
├── ReactFiberReconciler.js # Diff 算法入口
├── ReactFiber.js # Fiber 数据结构
scheduler/src/
└── Scheduler.js # 调度器
⭐⭐ 熟练理解
packages/react/src/
├── ReactHooks.js # Hooks API 入口
├── ReactChildren.js # Children 处理
├── ReactContext.js # Context
packages/react-dom/src/
├── client/
│ └── ReactDOMComponent.js # DOM 操作
⭐ 有印象即可
scheduler/src/
├── SchedulerPriorities.js # 优先级
├── minimalClient.js # 平台适配
📝 每阶段自查清单
�� 1 周完 ✅
- 能说出 react、react-dom、reconciler 的关系
- 熟悉所有常用 API
- 能解释 JSX 转译流程
- 能手写 JSX 转换
第 2 周完 ✅
- 能画出 Hooks 链表结构图
- 理解 useState/useEffect 原理
- 能解释闭包问题
- 能回答 5 道以上 Hooks 面试题
第 3 周完 ✅
- 深刻理解 Fiber 是什么
- 能描述 render 和 commit 阶段
- 理解优先级机制
- 能手画渲染流程图
第 4 周完 ✅
- 能写简单 Diff 算法
- 理解 key 的重要作用
- 理解双缓冲
- 能回答 Diff 相关面试题
第 5 周完 ✅
- 理解并发渲染
- 会用 Suspense、Transition
- 能根据场景选择优化方案
第 6 周完 ✅
- 有自己的 Mini React 项目
- 能流畅回答源码问题
- 通过模拟面试
🧐 高频面试题分类汇总
一、基础概念
- React 是什么？核心思想是什么？
- Virtual DOM 是什么？有什么优缺点？
- 什么是 JSX？为什么需要 JSX？
二、组件与生命周期
- 函数组件和 Class 组件的区别？
- 组件通信的方式有哪些？
- 受控组件和非受控组件的区别？
三、Hooks（重灾区）
- Hooks 的实现原理？
- 为什么 Hooks 不能在条件语句中调用？
- useEffect 的执行时机？
- useEffect 依赖项为空数组和专业摄影棚有啥区别？
- 什么是闭包陷阱？如何解决？
- useMemo 和 useCallback 的区别？
- useRef 和 useState 的区别？
四、Fiber 与渲染
- 什么是 Fiber？解决了什么问题？
- React 的渲染流程是怎样的？
- 什么是协调（Reconciler）？
- Render 和 Commit 阶段的区别？
五、Diff 算法（必考）
- React 的 Diff 算法是怎么工作的？
- 为什么要有 key？key 的作用？
- 为什么不能用 index 做 key？
六、性能优化
- 如何做性能优化？
- React.memo、useMemo、useCallback 如何选？
- 什么是 React 的并发模式？
七、React 18
- React 18 有哪些新特性？
- startTransition 有什么用？
- Suspense 原理？
📂 源码目录结构（随时查阅）
react/
├── packages/
│ ├── react/ # 核心 API
│ │ └── src/
│ │ ├── ReactHooks.js # 👈 Hooks 入口
│ │ ├── ReactContext.js # Context
│ │ ├── ReactChildren.js # Children 处理
│ │ └── jsx/ # JSX 转换
│ │
│ ├── react-reconciler/ # 👈 核心（最重要！）
│ │ └── src/
│ │ ├── ReactFiberWorkLoop.js # 渲染循环
│ │ ├── ReactFiberHooks.js # Hooks 实现
│ │ ├── ReactFiberReconciler.js # Diff 算法
│ │ └── ReactFiber.js # Fiber 数据结构
│ │
│ ├── react-dom/ # DOM 渲染
│ │ └── src/
│ │ └── client/
│ │
│ └── scheduler/ # 任务调度
│ └── src/
│
└── scripts/ # 构建脚本
🚀 立即开始
从 Day 1 开始吧！Day 1：React 包入口
出发！💪
