如何看react源码

阅读 React 源码的步骤

准备工作
确保具备扎实的 JavaScript 基础，熟悉 ES6+ 语法、闭包、原型链等核心概念。了解 React 的基本用法和核心 API（如组件、Hooks、Fiber 架构）。

克隆 React 源码仓库：

git clone https://github.com/facebook/react.git

安装依赖并构建：

cd react && yarn install && yarn build

源码目录结构

核心模块分布：

• packages/react：React 核心 API（如 createElement、Component）。
• packages/react-dom：DOM 渲染相关逻辑。
• packages/scheduler：调度器实现（Fiber 架构的核心）。
• packages/shared：公共工具函数。

重点关注 packages/react-reconciler，这是协调器的实现，包含 Fiber 架构的核心逻辑。

调试与工具

使用 yarn build 生成带 Source Map 的开发版本，便于调试。

通过示例项目调试：

1. 在 react 根目录运行 yarn build。
2. 在示例项目中通过 yarn link 链接本地 React 构建产物。
3. 使用 Chrome DevTools 的调试功能跟踪调用栈。

核心流程分析

初始化阶段
从 ReactDOM.render() 入口开始，跟踪调用链：

• 创建 Fiber 根节点（createRoot）。
• 初始化更新队列（enqueueUpdate）。

协调阶段

• beginWork：处理组件更新，生成子 Fiber 节点。
• completeWork：完成节点副作用标记（如 DOM 插入）。

提交阶段

• commitRoot：将副作用应用到 DOM，执行生命周期钩子。

关键算法与数据结构

Fiber 节点结构

type Fiber = {
  tag: WorkTag, // 组件类型（函数/类组件等）
  stateNode: any, // 实例（如 DOM 节点）
  return: Fiber | null, // 父节点
  child: Fiber | null, // 第一个子节点
  sibling: Fiber | null, // 兄弟节点
  alternate: Fiber | null, // 上一次渲染的 Fiber
  effectTag: SideEffectTag, // 副作用标记
};

调度算法
React 使用优先级调度（lane 模型），通过 requestIdleCallback 模拟时间切片。

学习资源

• React 官方文档的 设计原则。
• 社区解析文章（如 Fiber 架构、Hooks 实现原理）。
• 直接阅读源码注释，React 代码库包含大量设计说明。

通过结合调试、注释和核心模块分析，逐步深入理解 React 的内部机制。