我是如何阅读源码的

最近写了不少源码分析相关的文章，React、Vue 都有，想把我阅读源码的一些心得分享给你们。javascript

React：html

Vue：vue

快速调试源码

说到看源码，不少人都有个误区，以为看源码必需要到 github 上把完整的代码 clone 下来，认为只有把完整的代码下载下来，才能开始愉快的学习。java

调试 React

这里咱们先拿 React 举例，把源码 clone 下以后，整我的都懵逼了。react

git clone git@github.com:facebook/react.git
复制代码

通常这时候会开始在网上搜文章，如何调试 React 源码。可是这种大型项目的构建流程较为复杂，若是只是想简单了解源码，不须要去了解这些复杂的东西。这里教你们一个简单的方案，直接到 CDN 上下载官方编译好了的开发版源码（cdn.jsdelivr.net/npm/react@1…），中间的版本号能够替换成任何想看的版本。webpack

有了源码以后，咱们要开始写 Demo，这时候若是本身搭一个项目就比较麻烦了，由于写 React 就会有 jsx，就须要 babel 进行 jsx 转义，这里推荐使用官方脚手架： create-react-app。git

npx create-react-app react-demo
cd react-demo
复制代码

这里咱们须要稍微修改下 webpack 的配置，经过 react-app-rewired 修改配置。github

npm install react-app-rewired --save-dev
复制代码

而后，在文件夹内新建 config-overrides.js 文件，配置 webpack 的 externals 属性，让项目内的 react、react-dom 都可以走 window 下挂载的对象。web

/* config-overrides.js */

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  config.externals = {
    'react': 'window.React',
    'react-dom': 'window.ReactDOM',
  };
  return config;
}
复制代码

接下就是将 react 挂载到 window 上，把咱们以前在 CDN 上下载的 develope 版的源码放到 public 目录，而后在 public/index.html 中引入源码。npm

而后经过 npm run start 正常启动项目就行了。

接下来就能愉快的搞事情，能够在 Chrome 的 Sources 面板里面开始 debug 之旅了，固然若是你更喜欢 console.log ，也能够在 public/react.js 里打上心爱的 log 。

调试 Vue

调试 Vue 比 React 更加简单，由于 Vue 支持浏览器进行模板编译。咱们一样在 CDN 直接下载已经编译好的完整开发版（www.jsdelivr.com/package/npm…）。

而后，新建一个 vue.html ，把文件丢到本地的 http 服务里面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="/script/vue3.js"></script>
  <script> const app = Vue.createApp({ data() { return { name: 'shenfq' } }, template: `<div> Vue App </div> ` }) app.mount('#app') </script>
</body>
</html>
复制代码

咱们如今已经能够直接开始调试 Vue3 的源码了，就是这么简单粗暴。固然，若是想经过 .vue 的方式写模板，仍是得参照上面 React 提到的那种方式。

找准切入点

有了调试源码的方法，咱们还须要找准一个切入点，不能为了看源码而看源码。所谓的切入点就是一个个小问题，好比我想要弄懂 Vue 的模板是如何转变成虚拟 DOM 的，咱们能够先在官方文档查找资料，看有没有相关说明，幸运的是，Vue 官方文档在渲染函数-模板编译部分恰好这个问题有相关说明。

文档中提到了 Vue.compile ，而后咱们就能够在源码中搜索这个 Api 开始进行调试。这就是带着目的去看源码，咱们只有带着问题出发的时候，才会具备更高的效率。

除了带着问题出发，还能够参考其余优秀的文章，集千万网友的智慧于一体。固然这也是个双刃剑，由于你可能会搜到一些辣鸡文章，反而下降你的效率。并且，框架在迭代的过程当中，变化会不少，可能你学习的是 React 16 的源码，搜到的 React 15 相关的文章，而后你会花不少时间和精力想去弄清楚为何你看到的和别人写的为何不同，究竟是你的打开方式不对，仍是做者有笔误。

同时，还有一些文章喜欢画一些吸引眼球的架构图（我本人），看完你会直呼内行，可是这些架构图大可能是站在做者我的的角度上的画的，极可能和你以前的角度不同，又须要花一些时间来理解他的思路。若是，咱们把庞大的项目拆分红一个个小小的问题以后，逐个击破，这时候再从全局的角度来思考整个框架的设计思路以及运行逻辑，就能事半功倍。

强制输出

有输出的学习才是学习，在阅读源码的过程当中，必定得边看边思考，思考的过程当中，还须要造成文字记录，若是只是一直盯着代码看，很难理解。

我在看源码的过程当中，会一直思考，怎么样才能将这部分讲给别人听，是否是能写个 Demo 之类的，让你们跟着个人思路来学习。这样即让本身学懂了，又能够将学习的过程分享出来帮助到其余人，何乐而不为。