找准切入点，调试看源码，事半功倍
關注若川視野，回復"pdf" 領取資料，回復"加群"，可加群長期交流學習
最近寫了很多源碼分析相關的文章，React、Vue 都有，想把我閱讀源碼的一些心得分享給大家。
React：
React 架構的演變 - 從同步到異步
React 架構的演變 - 從遞歸到循環
React 架構的演變 - 更新機制
React 架構的演變 - Hooks 的實現
Vue：
Vue 模板編譯原理
Vue3 模板編譯優化
Vue3 Teleport 組件的實踐及原理
快速調試源碼
說到看源碼，很多人都有個誤區，覺得看源碼必須要到 github 上把完整的代碼 clone 下來，認為只有把完整的代碼下載下來，才能開始愉快的學習。
調試 React
這里我們先拿 React 舉例，把源碼 clone 下之后，整個人都懵逼了。
git?clone?git@github.com:facebook/react.git React 源碼目錄解構一般這時候會開始在網上搜文章，如何調試 React 源碼。但是這種大型項目的構建流程較為復雜，如果只是想簡單了解源碼，不需要去了解這些復雜的東西。這里教大家一個簡單的方案，直接到 CDN 上下載官方編譯好了的開發版源碼（https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.development.js），中間的版本號可以替換成任何想看的版本。
react有了源碼之后，我們要開始寫 Demo，這時候如果自己搭一個項目就比較麻煩了，因為寫 React 就會有 jsx，就需要 babel 進行 jsx 轉義，這里推薦使用官方腳手架：create-react-app。
npx?create-react-app?react-demo cd?react-demo這里我們需要稍微修改下 webpack 的配置，通過 react-app-rewired 修改配置。
npm?install?react-app-rewired?--save-dev 修改package.json然后，在文件夾內新建 config-overrides.js 文件，配置 webpack 的 externals 屬性，讓項目內的 react、react-dom 都能夠走 window 下掛載的對象。
/*?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 中引入源碼。
全局引入 react然后通過 npm run start 正常啟動項目就好了。
React App接下來就能愉快的搞事情，可以在 Chrome 的 Sources 面板里面開始 debug 之旅了，當然如果你更喜歡 console.log ，也可以在 public/react.js 里打上心愛的 log 。
Sources調試 Vue
調試 Vue 比 React 更加簡單，因為 Vue 支持瀏覽器進行模板編譯。我們同樣在 CDN 直接下載已經編譯好的完整開發版（https://www.jsdelivr.com/package/npm/vue?version=3.0.4&path=dist）。
image-20201205232605725然后，新建一個 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官方文檔文檔中提到了 Vue.compile ，然后我們就可以在源碼中搜索這個 Api 開始進行調試。這就是帶著目的去看源碼，我們只有帶著問題出發的時候，才會具有更高的效率。
除了帶著問題出發，還可以參考其他優秀的文章，集千萬網友的智慧于一體。當然這也是個雙刃劍，因為你可能會搜到一些辣雞文章，反而降低你的效率。而且，框架在迭代的過程中，變化會很多，可能你學習的是 React 16 的源碼，搜到的 React 15 相關的文章，然后你會花很多時間和精力想去弄清楚為什么你看到的和別人寫的為什么不一樣，到底是你的打開方式不對，還是作者有筆誤。
同時，還有一些文章喜歡畫一些吸引眼球的架構圖（我本人），看完你會直呼內行，但是這些架構圖大多是站在作者個人的角度上的畫的，很可能和你之前的角度不一樣，又需要花一些時間來理解他的思路。如果，我們把龐大的項目拆分成一個個小小的問題之后，逐個擊破，這時候再從全局的角度來思考整個框架的設計思路以及運行邏輯，就能事半功倍。
強制輸出
有輸出的學習才是學習，在閱讀源碼的過程中，一定得邊看邊思考，思考的過程中，還需要形成文字記錄，如果只是一直盯著代碼看，很難理解。
我在看源碼的過程中，會一直思考，怎么樣才能將這部分講給別人聽，是不是能寫個 Demo 之類的，讓大家跟著我的思路來學習。這樣即讓自己學懂了，又可以將學習的過程分享出來幫助到其他人，何樂而不為。
推薦閱讀
知乎問答：一年內的前端看不懂前端框架源碼怎么辦？
我在阿里招前端，我該怎么幫你？（文末有福利）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？
末尾
你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學習源碼整體架構系列~(點擊藍字了解我)
關注若川視野，回復"pdf" 領取優質前端書籍pdf，回復"加群"，可加群長期交流學習
我的博客地址：https://lxchuan12.gitee.io?歡迎收藏
覺得文章不錯，可以點個在看呀^_^另外歡迎留言交流～
小提醒：若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀，也可以星標我的公眾號，便于查找
總結
以上是生活随笔為你收集整理的找准切入点，调试看源码，事半功倍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 录屏软件——大黄蜂，rar压缩包，解压后
- 下一篇： airtest 不同目录下导入air文件