本系列源码学习,是基于 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 转译代码的基本流程
【其它博客】
- 完全理解React Fiber
- React16.2的fiber架构
- 一看就晕的React事件机制
- React 中常见的动画实现方式
© 著作权归作者所有,转载或内容合作请联系作者
喜欢的朋友记得点赞、收藏、关注哦!!!