逆向工程思维

阅读源码可以分三步走:

  1. 观察
  2. 假设
  3. 验证

一些技巧

  • 使用逆向工程思维阅读源码可以一边在本地看 source 代码(结合 IDE 找代码更加快),一边使用 Add React to a Website 的方式调试 demo / 验证猜想;
  • 读源码的时候可以将零星的知识记录下来,最后合成一张思维导图;
  • 有些复杂的递归逻辑可以结合自己的原生知识在需要的位置上进行断点调试;
  • debuggerchrome 上运用 decorator, 如下图;

debugger 在 chrome 上的方法

一些注意

代码库概览

官网 repoReact 依赖的工具库

根目录

  • packages: 核心模块
  • fixtures: 一些测试 App
  • build: 开发者本地执行 yarn build 后生成

monorepo

最为重要的是前 4 块内容。

React 中的设计原则

  • 组合。组件是可以互相组合的函数。
  • 抽象。React 只会抽象一些确实对使用者有帮助的特性(比如 State、LifeCycle),而不会抽象一些使用者自己可以实现的功能。React 团队 会在 Big Picture 中和大家商榷这些抽象。

React 项目运行

React 16 之后的打包方式

  • 16 之前是每个文件单独打包在 lib 文件夹下, 15.6.2
  • 16 版本只暴露两个包在 umd 文件夹下, 16.0.0

打包方式有这个转变的原因是因为之前打成多个包的形式对于打包器来说是低效的(会多出大量胶水代码)。

相关资源