React源码学习（一）：如何学习React源码

本系列源码学习，是基于 v16.13.1，v17.x与v16.x区别并不太大！

一、如何正确的学习React源码？

1. 找到Github，转到React仓库，fork / clone源码：React
2. 查看Readme，在Documentation中有Contributing Guide（参与贡献指南）
3. 点击跳转后，在“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），就能学习了。

二、流程步骤：

1. fork / clone source code;
2. 进入根目录；
3. yarn （国内情况...也许要墙）；
4. yarn build react/index,react-dom/index --type=UMD

三、关注官方资源

【React官方博客】

• 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 转译代码的基本流程

【其它博客】

• 完全理解React Fiber
• React16.2的fiber架构
• 一看就晕的React事件机制
• React 中常见的动画实现方式

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦！！！