React源码学习（一）：如何学习React源码
2021-03-15 本文已影响0人
青叶小小
本系列源码学习，是基于 v16.13.1，v17.x与v16.x区别并不太大！
一、如何正确的学习React源码？
- 找到Github，转到React仓库，fork / clone源码：React
- 查看Readme，在Documentation中有Contributing Guide（参与贡献指南）
- 点击跳转后，在“Development Workflow”中有如下一段话：
The easiest way to try your changes is to run yarn build react/index,react-dom/index --type=UMD and then open fixtures/packaging/babel-standalone/dev.html. This file already uses react.development.js from the build folder so it will pick up your changes.
最简单的方法就是先 git 下载 react 官方源码，然后编译成 UMD 库，再使用
fixtures/packaging/babel-standalone/dev.html，这个文件默认使用react.development.js
我们可以修改react源码，然后build，再打开/刷新dev.html（也可以自己demo），就能学习了。
二、流程步骤：
- fork / clone source code;
- 进入根目录；
- yarn （国内情况...也许要墙）；
- yarn build react/index,react-dom/index --type=UMD
三、关注官方资源
- Behind the Scenes: Improving the Repository Infrastructure 这篇介绍的是 React 项目仓库的基础设施。
- Sneak Peek: Beyond React 16
- React Fiber Architecture Andrew Clark对Fiber架构的介绍
Dan Abramov 最近在 JSConf 上对 React 未来的一些新特性的介绍 - Beyond React 16（墙）
四、附录
【达人分享】
- Evan You 介绍前端框架数据变化侦测原理的 Talk；Vue 文档中也有 Reactivity in Depth 这样的介绍原理的章节
- Sean Larkin 的 Everything is a plugin! Mastering webpack from the inside out 介绍了 Webpack 的核心组件 Tapable
- James Kyle 的 How to Build a Compiler 可以让我们了解 Babel 转译代码的基本流程
