我是如何閱讀源碼的

最近寫了不少源碼分析相關的文章，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 之類的，讓你們跟着個人思路來學習。這樣即讓本身學懂了，又能夠將學習的過程分享出來幫助到其餘人，何樂而不爲。