程式設計師是如何閱讀源碼的

2020-12-08 51CTO

最近寫了很多源碼分析相關的文章，React、Vue 都有，想把我閱讀源碼的一些心得分享給大家。

React：

  • React 架構的演變 - 從同步到異步
  • React 架構的演變 - 從遞歸到循環
  • React 架構的演變 - 更新機制
  • React 架構的演變 - Hooks 的實現

Vue：

  • Vue 模板編譯原理
  • Vue3 模板編譯優化
  • Vue3 Teleport 組件的實踐及原理

快速調試源碼

說到看源碼，很多人都有個誤區，覺得看源碼必須要到 github 上把完整的代碼 clone 下來，認為只有把完整的代碼下載下來，才能開始愉快的學習。

調試 React

這裡我們先拿 React 舉例，把源碼 clone 下之後，整個人都懵逼了。

  1. 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。

  1. npx create-react-app react-demo 
  2. cd react-demo 

這裡我們需要稍微修改下 webpack 的配置，通過 react-app-rewired 修改配置。

  1. npm install react-app-rewired  

 

修改package.json

然後，在文件夾內新建 config-overrides.js 文件，配置 webpack 的 externals 屬性，讓項目內的 react、react-dom 都能夠走 window 下掛載的對象。

  1. /* config-overrides.js */ 
  2.  
  3. module.exports = function override(config, env) { 
  4.   // do stuff with the webpack config... 
  5.   config.externals = { 
  6.     'react': 'window.React', 
  7.     'react-dom': 'window.ReactDOM', 
  8.   }; 
  9.   return config; 
  10. } 

接下就是將 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 服務裡面。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>Vue3 Demo</title> 
  6. </head> 
  7. <body> 
  8.   <div id="app"></div> 
  9.   <script src="/script/vue3.js"></script> 
  10.   <script> 
  11.     const app = Vue.createApp({ 
  12.       data() { 
  13.         return { 
  14.           name: 'shenfq' 
  15.         } 
  16.       }, 
  17.       template: `<div> Vue App </div> ` 
  18.     }) 
  19.     app.mount('#app') 
  20.   </script> 
  21. </body> 
  22. </html> 

我們現在已經可以直接開始調試 Vue3 的源碼了，就是這麼簡單粗暴。當然，如果想通過 .vue 的方式寫模板，還是得參照上面 React 提到的那種方式。

找準切入點

有了調試源碼的方法，我們還需要找準一個切入點，不能為了看源碼而看源碼。所謂的切入點就是一個個小問題，比如我想要弄懂 Vue 的模板是如何轉變成虛擬 DOM 的，我們可以先在官方文檔查找資料，看有沒有相關說明，幸運的是，Vue 官方文檔在渲染函數-模板編譯部分剛好這個問題有相關說明。


Vue官方文檔

文檔中提到了 Vue.compile ，然後我們就可以在源碼中搜索這個 Api 開始進行調試。這就是帶著目的去看源碼，我們只有帶著問題出發的時候，才會具有更高的效率。

除了帶著問題出發，還可以參考其他優秀的文章，集千萬網友的智慧於一體。當然這也是個雙刃劍，因為你可能會搜到一些辣雞文章，反而降低你的效率。而且，框架在迭代的過程中，變化會很多，可能你學習的是 React 16 的源碼，搜到的 React 15 相關的文章，然後你會花很多時間和精力想去弄清楚為什麼你看到的和別人寫的為什麼不一樣，到底是你的打開方式不對，還是作者有筆誤。

同時，還有一些文章喜歡畫一些吸引眼球的架構圖(我本人)，看完你會直呼內行，但是這些架構圖大多是站在作者個人的角度上的畫的，很可能和你之前的角度不一樣，又需要花一些時間來理解他的思路。如果，我們把龐大的項目拆分成一個個小小的問題之後，逐個擊破，這時候再從全局的角度來思考整個框架的設計思路以及運行邏輯，就能事半功倍。

強制輸出

有輸出的學習才是學習，在閱讀源碼的過程中，一定得邊看邊思考，思考的過程中，還需要形成文字記錄，如果只是一直盯著代碼看，很難理解。

我在看源碼的過程中，會一直思考，怎麼樣才能將這部分講給別人聽，是不是能寫個 Demo 之類的，讓大家跟著我的思路來學習。這樣即讓自己學懂了，又可以將學習的過程分享出來幫助到其他人，何樂而不為。

【編輯推薦】

【責任編輯：

姜華

TEL：（010）68476606】

點讚 0

相關焦點

  • 如何閱讀Java源碼?
    閱讀Java源碼的前提條件：1、技術基礎在閱讀源碼之前，我們要有一定程度的技術基礎的支持。大多數程式設計師的學習態度分為如下幾個層次：完成自己的項目就可以了，遇到不懂的地方就百度一下。不僅做好項目，還會去閱讀一些和項目有關的書籍。除了閱讀和項目相關的書籍之外，還會閱讀一些IT行業相關的書籍。
  • 如何閱讀源碼?推薦一本書
    最終，這些思維邏輯和演化過程都會投射和堆疊到源碼上，使得源碼閱讀的過程是一個通過源碼去逆推思維邏輯和演化過程的工作，因此十分困難。3 源碼閱讀方法選好源碼項目之後，要做的就是閱讀源碼。作者介紹了源碼閱讀的方法、技巧、經驗。主要包括兩個大的步驟：項目初探源碼閱讀在項目初探環節，主要是通過斷點運行項目，然後分析項目的整體框架、跳轉流向。
  • 好程式設計師前端:MongoDB資料庫全套教程(精華版 含源碼)
    關於如何走好人生重要的幾步，是每個人都值得深思的問題。如果你對未來充滿期許，如果你現在迷茫焦慮，那麼不妨來通過學習提升自己。選一門自己喜歡的課程，靜下心來，用時間去積累，等到金秋時節去收穫埃及努力的果實！為了方便大家學習，好程式設計師一直堅持免費為大家分享IT教程，就是為了能夠讓更多人享受到優質的編程學習資源。
  • 專訪許鵬:談C程式設計師修養及大型項目源碼閱讀與學習
    言歸正傳，在對許鵬有了簡單的了解之後，我們一起走進本次的主題——C程式設計師的修養、大型項目的源碼學習，以及Spark和Storm的源碼走讀。 內存分配，推薦閱讀Ptmalloc源碼分析，無論是C還是C++程式設計師，這一部分是最容易踩雷的，多讀一點基礎的東西，會在解決實際問題的時候，不至於手足無措。以這些為基礎，再結合Valgrind或Purify，相信效果會更好。 3.
  • 拼多多JDK源碼大揭秘,由淺入深看源碼,探究Java並發原理
    寫在前面幾乎所有的大神都會強調看源碼，也強調源碼的重要性；但是如何看源碼，源碼看什麼？看了什麼用？看了怎麼用？困擾很多人，尤其是初學者。如何閱讀源碼，是每個程式設計師需要面臨的一項挑戰。為什麼需要閱讀源碼？
  • 程式設計師如何自我學習?阿里資深技術專家這樣做
    非雞湯：不要和程式設計師談自己的編程歷史，很多的經驗在今天已經不適用了。只要2-3年不關注技術，就基本快和程式設計師和編程絕緣啦，不是絕對，但是通常不會錯。現在很多項目不是一兩個程式設計師單打獨鬥，而是一個團隊加上像github那種協作非常好的平臺，所以文檔和代碼、新特性不匹配已經非常少了，很多issue都是關於文檔的。另外一些新的技術，剛開始只有文檔，在圖書還沒有來得及出版的情況下，你只能閱讀文檔。
  • 開課吧雙十二教育節:助力學員輕鬆掌握Spring AOP源碼
    近年來,Spring AOP源碼已然成為國內網際網路大廠面試JAVA程式設計師必問問題。想要進入網際網路大廠的Java程式設計師,生澀難懂的Spring AOP源碼是一個繞不過去的坎。開課吧的「面試官最愛問的Spring AOP源碼全解析訓練營」,非常適合使用過Spring框架的小夥伴以及想要輕鬆進入網際網路大廠的JAVA程式設計師。
  • 初級程式設計師、中級程式設計師,高級程式設計師是如何定義的?
    我將程式設計師分成三個級別：初級程式設計師能夠獨立完成一個項目中級程式設計師能夠了解一些框架原理，做出一些改進和優化>高級程式設計師能夠寫一些框架，甚至一個新語言在具體分析各個級別程式設計師的定義的時候，我們先來想一下，大部分的程式設計師來源於：學校、自學和培訓機構。
  • Github一夜爆火的SSM源碼剖析手冊也太香了吧
    何況在面試「造火箭」、工作「螺絲釘」的大環境下，很多程式設計師雖然對框架使用得非常嫻熟，但對底層原理及架構設計缺少足夠的積累與認知，知其然卻不知其所以然。我們學習的各種設計模式，最終都需要在源碼中進行落地。當然，我們也需要從優秀的源碼中挖掘設計模式及設計模式的應用場景,學習其中的設計藝術。所以，學習源碼已經是大勢所趨！如何高效閱讀源碼？
  • 月薪2萬的Java程式設計師都有哪些共同點?
    那麼，對於一名Java開發人員來講，到底該如何規劃自己的職業生涯？或者在技術方面需要達到什麼樣的水平呢？明確目標，擺正態度剛入職場擺正態度，別在剛入職場就盯著錢看。否則你不會醉心於去研究源碼、架構、算法等其它人認為枯燥無比的知識。
  • 乾貨|新手也能看懂的源碼閱讀技巧
    搭上 SpringBoot 攔截器源碼分析專車【原創】008 | SpringBoot 源碼專車總結（共8篇）但是俗話說，賣你魚不如教你打魚，有小白粉說，那新手有什麼閱讀源碼的技巧呢，這不，來了。那時候開始意識到，源碼這東西在之前的工作的中感受不到，但是在面試中好像面的還挺頻繁的，從此有意識的開始了jdk部分源碼的閱讀（主要是集合）。一開始看源碼，看的特別糙，知道個大概，知道ArrayList的底層實現是數組，HashMap的底層是散列表（數組+鍊表）；更深入一點的擴容、hash碰撞等等就不知道了。
  • 看到Mybatis源碼就感到煩躁,怎麼辦?
    背景最近，聽到很多吐槽：看到源碼，心中就感到十分糾結、特別煩惱。為什麼糾結？因為面試的時候，面試官很喜歡問：你看過什麼框架源碼？JDK源碼也行。這時候，如果回答沒有看過，雖然沒讓你立馬回去等通知。確實很忙，經常看了一部分後，天天加班，沒時間看，忙完後又忘了之前正在看的某某源碼。個人建議對於一般java程式設計師來說，閱讀源碼之前到底需要些什麼技能呢？
  • 程式設計師竊取公司《傳奇霸業》源碼,被判刑
    又有程式設計師因竊取公司軟體源碼而被判刑。
  • 交付程序不給錢,程式設計師一怒之下開源客戶項目代碼
    除了此事引發的技術細節大討論以外，背後問題不得不引人深思：開發者的職業道德與法律上的漏洞引發的事故，該如何看待？不給錢就開源最近，外國一位名叫 Jason Werner 的程式設計師小哥過得很鬧心。事件的起因是自由職業的他接了個外包需求，給一位客戶開發一個名為 OneFraction 的平臺。
  • 百度大牛甩出筆記全新演繹Spring 5新特性,原理+源碼+實戰三飛
    它的重要性想必不用我多說了，作為一位身處於2020年的Java程式設計師，從源碼到實際開發，Spring這一塊是我們繞不過去的坎。既然繞不過去，那就啃下他！對於Spring的學習，小編前段時間剛好在百度的一位大佬手上拿到一份Spring進階寶典，看了之後，發現市面上的資料與其差距不止一點點！
  • 看BAT技術面試官如何挑選Java程式設計師
    我覺得優秀的，有潛質的程式設計師可以從下面幾點體現。1. 性能調優幾乎每個JAVA後端開發程式設計師，都會在面試時碰到諸如如何性能調優的問題，如何回答好這個問題，不僅僅是對JVM，內存模型等的理解，更重要的是碰到性能問題時，排查問題的方法論和思路。
  • PEA源碼閱讀筆記
    筆者將這條信息整理在了公眾號文章 「測繪黑板報-201027」 中，截止 2021 年 1 月 31 日已經有了 5800+ 閱讀量，是黑板報系列文章平均閱讀量的兩倍左右，可以看出不少小夥伴對 GA 開源軟體的熱情。
  • 初級程式設計師如何順利閱讀成品軟體的代碼
    閱讀別人的代碼本身就是一件比較麻煩的事情，而且由於項目進展的要求，往往時間上也會比較緊張，這是不少程式設計師都會面臨的比較棘手的問題。不僅對於Java初級程式設計師來說這是比較困難的事情，對於經驗豐富的Java程式設計師來說，閱讀別人的成品代碼也不會感覺到輕鬆。
  • GitHub上最火的程式設計師簡歷項目與模版下載
    壹題22k star 項目，160+多道前端面試真題含解答，還有一系列基礎進階文章https://muyiy.cn/question/JavaScript-Algorithms2.1k star 項目，130+道前端算法、編程、手寫源碼真題，還有一系列前端算法進階文章，持續更新中https://github.com/sisterAn/JavaScript-Algorithms
  • 源碼閱讀經驗談-slim,darknet,labelimg,caffe
    本文首先談自己的源碼閱讀體驗，然後給幾個案例解讀，選的例子都是比較簡單。重在說明我琢磨的點線面源碼閱讀方法。