如何读react源码

阅读 React 源码的准备工作

安装必要的工具和环境。确保本地已安装 Node.js、Git 和代码编辑器（如 VSCode）。克隆 React 源码仓库到本地：

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

安装依赖并构建源码：

cd react
yarn install
yarn build

源码目录结构解析

React 源码主要分为以下核心模块：

• packages/react：核心 React API 和组件定义。
• packages/react-dom：DOM 渲染相关逻辑。
• packages/scheduler：调度器实现。
• packages/shared：公共工具和类型定义。

重点关注 packages/react/src 和 packages/react-dom/src，分别对应 React 核心和渲染层逻辑。

调试源码的方法

通过 yarn link 将本地构建的 React 链接到测试项目：

cd build/node_modules/react
yarn link
cd build/node_modules/react-dom
yarn link

在测试项目中链接本地 React：

yarn link react react-dom

使用 Chrome DevTools 的 Sources 面板添加 react/build 目录，直接调试编译后的代码。

核心流程分析

从 ReactDOM.render() 入口开始追踪渲染流程：

1. 创建根节点（createRoot）。
2. 生成 Fiber 树结构。
3. 调度更新（scheduleUpdateOnFiber）。
4. 协调（Reconciliation）和提交（Commit）阶段。

关键算法与数据结构

Fiber 架构是核心数据结构，定义在 packages/react-reconciler/src/ReactFiber.new.js：

function FiberNode(tag, pendingProps, key, mode) {
  this.tag = tag; // 组件类型
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null; // 关联的实例
  // ...其他属性
}

双缓冲技术通过 current 和 workInProgress 两棵 Fiber 树实现无卡顿更新。

调度系统原理

调度器（Scheduler）在 packages/scheduler 中实现，基于优先级的时间切片机制：

function unstable_scheduleCallback(priorityLevel, callback, options) {
  // 计算任务过期时间
  var startTime = getCurrentTime();
  var timeout;
  switch (priorityLevel) {
    case ImmediatePriority:
      timeout = IMMEDIATE_PRIORITY_TIMEOUT;
      break;
    // ...其他优先级处理
  }
  // ...任务入队逻辑
}

性能优化技巧

React 使用位运算进行高效状态标记，例如 NoEffect 和 PerformedWork 定义在 packages/react-reconciler/src/ReactSideEffectTags.js：

export const NoEffect = /* 0b000000000000 */ 0;
export const PerformedWork = /* 0b000000000001 */ 1;

推荐学习路径

1. 从简单组件渲染流程开始（如函数组件）。
2. 逐步深入 Hooks 实现（packages/react/src/ReactHooks.js）。
3. 研究事件系统（packages/react-dom/src/events）。
4. 最后分析并发模式（Concurrent Mode）的实现。