在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

facebook/react

菜单

存储库结构

相关源文件

本文档概述了 React 仓库的组织和结构。它提供了代码组织方式、包系统以及代码库中关键组件之间关系的概览。

概述

React 仓库被组织为一个 monorepo（单一仓库），其中包含多个包，并使用 Yarn workspaces 进行依赖管理。该仓库包含了所有核心 React 包以及支持工具、实用程序和测试基础设施。

来源：package.json1-159 scripts/rollup/bundles.js1-1100 scripts/rollup/build.js1-100

软件包结构

React 被组织成多个包，每个包都有不同的用途。这些包遵循一致的结构，大多数包提供不同的入口点和构建格式。

核心软件包

包描述主要入口点
react核心 React APIjsx-runtime, jsx-dev-runtime
react-domDOM 渲染器客户端, 服务器, 静态, 性能分析
react-reconciler协调引擎渲染器使用
scheduler调度原语协调器使用
react-is类型检查工具库使用
eslint-plugin-react-hooksHooks linting 规则ESLint 使用

每个包可以有多种打包类型

来源：scripts/rollup/bundles.js10-54 packages/react/package.json1-52 packages/react-dom/package.json1-126 packages/react-reconciler/package.json1-34 packages/scheduler/package.json1-27 packages/react-is/package.json1-26 packages/eslint-plugin-react-hooks/package.json1-69

工作区配置

该仓库被设置为 Yarn workspace，这使得包依赖项在开发过程中可以本地链接。workspace 在根目录的 package.json 文件中配置。

{
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  ...
}

此配置便于管理包之间的相互依赖关系，并简化了开发工作流程。

来源：package.json1-5

构建系统

React 使用基于 Rollup 的复杂构建系统，并针对不同的环境和打包格式进行了广泛的定制。

打包类型

构建系统定义了各种打包类型，以针对不同的环境

来源：scripts/rollup/bundles.js10-31 scripts/rollup/build.js33-70

模块类型

构建系统还定义了不同的模块类型

这些模块类型决定了包的构建方式以及它们包含的依赖项。

来源：scripts/rollup/bundles.js56-67

构建流程

React 构建过程涉及几个关键步骤

构建过程支持为不同的发布渠道构建

  1. Stable（稳定版）: 遵循语义化版本控制的常规发布
  2. Experimental（实验版）: 前沿功能，不建议用于生产环境
  3. Canary（金丝雀版）: 用于测试即将推出功能的预发布版本

来源：scripts/rollup/build.js632-1100 scripts/rollup/build-all-release-channels.js1-480

模块分叉

React 采用了一个复杂的模块分叉系统，该系统允许根据构建环境使用同一模块的不同实现。

该分叉系统在 scripts/rollup/forks.js 中定义，并允许 React 进行以下操作：

  1. 用特定于环境的实现替换共享模块
  2. 处理不同渲染器的平台特定代码
  3. 针对不同环境（浏览器、Node.js、React Native）优化代码

主要的模块分叉包括

  • ReactFeatureFlags: 根据构建类型配置特性标志
  • ReactFiberConfig: 渲染器特定配置
  • ReactServerStreamConfig: 服务器渲染流实现
  • EventListener: 环境特定事件处理

来源：scripts/rollup/forks.js45-191 scripts/rollup/forks.js133-240 scripts/rollup/modules.js63-81

功能标志

React 使用特性标志来在不同环境中启用或禁用功能。这些标志通过模块分叉系统根据打包类型进行配置。

来源：scripts/rollup/forks.js134-191

发布渠道

React 使用多个发布渠道来管理不同的版本和功能集

发布渠道在 ReactVersions.js 和构建系统中管理

来源：ReactVersions.js21-64 scripts/rollup/build-all-release-channels.js112-147

仓库目录结构

React 仓库遵循标准化的目录结构

目录目的
packages/包含所有 React 包
scripts/构建、发布和实用程序脚本
fixtures/测试夹具和示例
build/构建输出（未提交到 git）
scripts/rollup/Rollup 构建配置
scripts/release/发布管理脚本
scripts/jest/Jest 测试配置
scripts/error-codes/错误代码提取工具
scripts/flow/Flow 类型检查配置

来源：package.json120-152 scripts/flow/config/flowconfig1-46

持续集成和测试

该仓库包含 CI/CD 工作流的配置，用于在各种配置下构建和测试 React。还集成了大小比较工具，以跟踪打包大小的变化。

打包大小跟踪是通过 SizeBot 实现的，该机器人会在 CI 中运行，并在拉取请求中评论大小变化。

来源：dangerfile.js30-282 scripts/rollup/stats.js1-186

结论

React 仓库结构旨在支持多个发布渠道、构建目标和环境，同时保持模块化架构。这种组织方式使 React 团队能够高效地开发和维护该库，同时支持广泛的用例和平台。

理解这种结构对于希望修改 React 或了解系统不同部分如何协同工作的贡献者至关重要。