react源码如何看

阅读React源码的方法

准备工具与环境 安装Node.js和Git，确保本地开发环境能运行React。推荐使用代码编辑器（如VSCode）并安装代码跳转插件。

克隆React仓库 从GitHub克隆React官方仓库：

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

理解代码结构 React源码主要分为几个核心模块：

• packages/react：核心React API
• packages/react-dom：DOM渲染相关
• packages/scheduler：调度系统
• packages/react-reconciler：协调器（Fiber架构核心）

从入口开始阅读 建议从react-dom的render方法入手，逐步跟踪调用链路。React 18+的入口文件通常在packages/react-dom/src/client/ReactDOMRoot.js。

调试技巧 使用yarn build命令生成开发版构建，通过yarn build react/index,react-dom/index --type=UMD生成可直接引用的UMD包便于调试。

关键概念解析

Fiber架构 React的核心调度单元，位于packages/react-reconciler。Fiber节点包含组件类型、状态、副作用标记等信息，通过链表结构组织。

事件系统 合成事件实现在packages/react-dom/src/events，了解事件委托和插件化机制。React将所有事件统一代理到document层。

Hooks实现 Hooks的核心代码在packages/react/src/ReactHooks.js。重点理解HooksDispatcher和mountWorkInProgressHook的实现机制。

辅助工具推荐

React DevTools 使用React Developer Tools的"Components"和"Profiler"标签页观察组件树和渲染性能。

源码地图 在浏览器开发者工具中启用source map，可直接调试转译前的源码。

可视化工具 使用react-fiber-visualizer等工具观察Fiber树的结构变化。