| name | react-source-analysis |
| description | React 19.2 源码深度解读。当用户需要分析 React 源码、创建源码解读文档、讲解核心机制（Fiber、Scheduler、Hooks）、对比框架设计、绘制架构图或解释 API 实现原理时使用。专注于客户端渲染（CSR），不涉及 SSR。 |
React 源码深度解读
专注于 React 19.2 客户端渲染（CSR）源码的深度解读。
版本: React 19.2.4 | 范围: 仅 CSR，不涉及 SSR
核心文档
学习路径
基础: Fiber 架构 → Hooks 实现 → 初次挂载 → 更新流程 → Commit 阶段
进阶: Scheduler 调度器 → Lane 模型 → Reconciliation → Diff 算法 → Concurrent Mode
触发条件
✅ 应该触发
- 分析 React 19.2 源码模块或功能
- 创建源码解读文档
- 讲解核心机制（Fiber、Scheduler、Hooks、Reconciliation）
- 对比框架设计差异（React vs Vue/SolidJS）
- 创建源码示例 demo
- 绘制架构或流程图
- 解释 API 实现原理（useState、useEffect）
❌ 不应该触发
- SSR 相关问题（超出范围，见 csr-scope.md）
- 调试应用 bug（使用调试工具）
- React 生态工具（Next.js、Remix）
- React Native 内容
边界案例
- Suspense: ✅ 客户端数据获取 | ❌ SSR 流式渲染
- React.lazy: ✅ 客户端代码分割 | ❌ SSR 代码分割
- 事件系统: ✅ 浏览器事件 | ❌ React Native 事件
工作流程
1. 源码分析
阅读 packages/react-dojo/source-code/react/ 中的源码，在浏览器中设置断点调试，标注关键位置。
2. 架构图自动生成
自动调用 excalidraw skill 为 reconciler 流程生成图表。
Reconciler 流程图模式
| 流程类型 | 视觉规范 | 调用示例 |
|---|
| Fiber 树遍历 | 紫色系矩形表示 Fiber 节点，绿色箭头表示遍历方向（child/sibling/return） | "创建 Fiber 树遍历流程图，展示 beginWork → child → sibling → return 的深度优先遍历" |
| 工作循环 | 黄色系矩形表示循环体（workLoopSync/Concurrent），橙色箭头表示执行流，菱形表示条件判断 | "创建工作循环流程图，包含 workLoopSync、performUnitOfWork、workInProgress 判断" |
| 调度流程 | 蓝色系矩形表示任务队列，绿色系表示调度器组件，实线箭头表示任务流转 | "创建 Scheduler 调度流程图，展示 taskQueue、timerQueue、requestHostCallback 的关系" |
| Commit 阶段 | 橙色系矩形表示各个子阶段（before mutation/mutation/layout），实线箭头表示顺序执行 | "创建 Commit 三阶段流程图，标注 commitBeforeMutationEffects、commitMutationEffects、commitLayoutEffects" |
| Hooks 链表 | 靛蓝系矩形表示 Hook 节点，虚线箭头表示 next 指针，紫色系表示 Fiber | "创建 Hooks 链表结构图，展示 memoizedState → hook1 → hook2 → hook3 的链式关系" |
自动生成调用格式
请使用 excalidraw skill 创建 {流程名称} 流程图，要求：
1. 核心组件：{列出关键函数/数据结构}（使用 {颜色系}）
2. 执行流程：{描述主要步骤}（使用 {箭头类型}）
3. 条件分支：{列出判断节点}（使用菱形）
4. 标注说明：{关键参数或返回值}
5. 保存路径：packages/rspress-site/docs/public/diagrams/{topic}.excalidraw
示例调用：
请使用 excalidraw skill 创建 Fiber 工作循环流程图，要求：
1. 核心组件：workLoopSync、workLoopConcurrent、performUnitOfWork（使用黄色系矩形）
2. 执行流程：循环判断 → 执行单元 → 更新指针（使用橙色实线箭头）
3. 条件分支：workInProgress !== null、shouldYield()（使用菱形）
4. 标注说明：返回值类型、循环条件、中断时机
5. 保存路径：packages/rspress-site/docs/public/diagrams/work-loop.excalidraw
3. 示例代码
在 packages/rspress-site/examples/ 创建可运行 demo，在 react-dojo 中测试。
4. 文档撰写
在 packages/rspress-site/docs/ 创建 MDX 文档，参考 template.md 结构。
文档结构（必需章节）
---
title: {主题标题}
description: {简短描述}
---
# {主题标题}
## 概述
学习目标和内容简介
## 架构设计
<Diagram src="/diagrams/{topic}.excalidraw" />
## 核心源码解析
引用源码片段，标注文件路径和行号
## 实战示例
<Coder title="示例" src="/examples/{topic}.tsx" lang="tsx" />
## 框架对比
<Tabs>
<Tab label="React">...</Tab>
<Tab label="Vue">...</Tab>
<Tab label="SolidJS">...</Tab>
</Tabs>
## 总结
关键要点回顾
源码引用规范
标注完整路径和行号：
在 `react-reconciler/src/ReactFiberWorkLoop.js:1234` 中：
\`\`\`javascript
function performUnitOfWork(unitOfWork: Fiber): void {
// 源码片段...
}
\`\`\`
核心主题
必读基础（⭐⭐⭐）
Fiber 架构与双缓冲、Hooks 实现机制、初次挂载流程、更新流程、Commit 阶段
进阶主题（⭐⭐）
Scheduler 调度器、Lane 模型、Reconciliation 协调、Diff 算法、Concurrent Mode
Hooks 专题
useState、useEffect、useRef、useMemo/useCallback、useContext、useTransition、useDeferredValue
其他核心功能
Context 传递、事件系统、Refs、错误边界、Suspense（客户端）
质量检查清单
