如何读react源码
理解React源码的结构
React源码托管在GitHub上，主要分为几个核心模块：react、react-dom、react-reconciler等。react包包含核心API和组件逻辑，react-dom负责DOM渲染，react-reconciler是协调器的实现，管理组件更新和渲染流程。
克隆React仓库后，重点关注packages目录下的模块。阅读前建议熟悉Monorepo结构，了解各个包的依赖关系。React使用Flow进行类型检查，但已逐步迁移到TypeScript。
从入口点开始阅读
选择核心功能的入口点作为起点，例如react/src/React.js或react-dom/src/client/ReactDOM.js。这些文件通常导出主要API，如createElement、useState等。通过调用栈逐步深入，理解函数调用链路。
React的核心逻辑集中在react-reconciler中，尤其是ReactFiberWorkLoop.js和ReactFiberReconciler.js，这些文件实现了Fiber架构和调度机制。阅读时注意Fiber节点的结构和调度优先级。
调试运行环境
搭建本地调试环境有助于理解运行时行为。通过yarn build命令构建React的调试版本，生成build目录下的未压缩代码。在测试项目中引用本地构建的React，利用浏览器开发者工具设置断点调试。
使用React的测试用例辅助理解。React的测试代码位于__tests__目录，覆盖了大部分核心功能。运行测试用例可以观察特定功能的执行路径，例如yarn test --env=jsdom react-reconciler。
学习核心算法与数据结构
Fiber架构是React的核心，其数据结构定义在ReactFiber.js中。每个Fiber节点对应一个组件实例，包含type、props、stateNode等属性。理解alternate、effectTag等字段的作用，掌握双缓存技术的工作原理。
调度算法基于优先级机制，代码集中在Scheduler模块。研究unstable_scheduleCallback函数的实现，了解如何通过expirationTime管理任务队列。时间切片和并发模式的关键逻辑也在此部分体现。
跟踪渲染生命周期
从ReactDOM.render或ReactDOM.createRoot开始，跟踪组件的挂载流程。react-reconciler中的updateContainer函数初始化根Fiber，scheduleUpdateOnFiber触发调度。渲染分为beginWork和completeWork两个阶段，分别在ReactFiberBeginWork.js和ReactFiberCompleteWork.js中实现。
Hooks的实现位于react/src/ReactHooks.js和react-reconciler/src/ReactFiberHooks.js。阅读useState或useEffect的代码，理解Hook链表结构和调度时机。注意dispatcher的动态切换机制。
参考文档与社区资源
React官方博客的《React Fiber Architecture》是理解协调算法的重要参考。社区中的源码解析文章和视频教程（如Andrew Clark的分享）提供高层视角。结合React的设计理念（如声明式编程、单向数据流）分析代码实现。
参与React的GitHub Issues和RFC讨论，了解设计决策的背景。例如，concurrent mode的RFC详细说明了异步渲染的设计思路。对照RFC文档与具体实现，加深对复杂功能的理解。
