react源码如何看
阅读React源码的准备工作
安装Node.js和Git环境，确保能够运行React的构建脚本。克隆React官方仓库（github.com/facebook/react），切换到稳定分支（如main或最新版本标签）。
熟悉现代JavaScript语法（ES6+）、Flow类型注解（React旧版使用）及TypeScript（新版迁移中）。了解虚拟DOM、Fiber架构等核心概念有助于理解实现逻辑。
源码目录结构解析
packages目录是核心代码所在：
react：核心API定义（如createElement）react-dom：DOM渲染器scheduler：任务调度系统react-reconciler：Fiber协调器实现shared：跨包共享的公共代码
重点关注react-reconciler/src/ReactFiberWorkLoop.js和react-dom/src/client/ReactDOMRoot.js等关键文件。
调试与运行示例
使用yarn build命令构建源码，通过yarn watch启动开发模式监听变更。利用官方示例（如fixtures目录）或自建最小化Demo进行调试。
在Chrome DevTools中开启"Pause on caught exceptions"和源码映射，结合断点逐步跟踪组件挂载、更新流程。注意React的批量更新和异步渲染特性。
核心逻辑分析路线
从ReactDOM.render()入口开始，追踪初始化过程：
- 创建FiberRoot和HostRootFiber
- 构建工作循环（workLoopSync/workLoopConcurrent）
- 协调算法（beginWork/completeWork）
- 提交阶段（commitRoot）
研究Hooks实现可查看react-reconciler/src/ReactFiberHooks.js，了解链表结构和调度机制。事件系统位于react-dom/src/events。
辅助工具与资源
使用source-map-explorer分析构建产物依赖关系。参考官方文档的"Implementation Notes"部分和源码中的详细注释。
加入React社区（如Discord、GitHub Discussions）讨论具体问题。阅读核心团队的分享文章（如Dan Abramov的博客）了解设计思想。
