當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

找准切入点，调试看源码，事半功倍

發(fā)布時(shí)間：2023/12/9 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了找准切入点，调试看源码，事半功倍小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

關(guān)注若川視野，回復(fù)"pdf" 領(lǐng)取資料，回復(fù)"加群"，可加群長(zhǎng)期交流學(xué)習(xí)

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

React：

React 架構(gòu)的演變 - 從同步到異步
React 架構(gòu)的演變 - 從遞歸到循環(huán)
React 架構(gòu)的演變 - 更新機(jī)制
React 架構(gòu)的演變 - Hooks 的實(shí)現(xiàn)

Vue：

Vue 模板編譯原理
Vue3 模板編譯優(yōu)化
Vue3 Teleport 組件的實(shí)踐及原理

快速調(diào)試源碼

說(shuō)到看源碼，很多人都有個(gè)誤區(qū)，覺得看源碼必須要到 github 上把完整的代碼 clone 下來(lái)，認(rèn)為只有把完整的代碼下載下來(lái)，才能開始愉快的學(xué)習(xí)。

調(diào)試 React

這里我們先拿 React 舉例，把源碼 clone 下之后，整個(gè)人都懵逼了。

git?clone?git@github.com:facebook/react.git React 源碼目錄解構(gòu)

一般這時(shí)候會(huì)開始在網(wǎng)上搜文章，如何調(diào)試 React 源碼。但是這種大型項(xiàng)目的構(gòu)建流程較為復(fù)雜，如果只是想簡(jiǎn)單了解源碼，不需要去了解這些復(fù)雜的東西。這里教大家一個(gè)簡(jiǎn)單的方案，直接到 CDN 上下載官方編譯好了的開發(fā)版源碼（https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.development.js），中間的版本號(hào)可以替換成任何想看的版本。

react

有了源碼之后，我們要開始寫 Demo，這時(shí)候如果自己搭一個(gè)項(xiàng)目就比較麻煩了，因?yàn)閷?React 就會(huì)有 jsx，就需要 babel 進(jìn)行 jsx 轉(zhuǎn)義，這里推薦使用官方腳手架：create-react-app。

npx?create-react-app?react-demo cd?react-demo

這里我們需要稍微修改下 webpack 的配置，通過(guò) react-app-rewired 修改配置。

npm?install?react-app-rewired?--save-dev 修改package.json

然后，在文件夾內(nèi)新建 config-overrides.js 文件，配置 webpack 的 externals 屬性，讓項(xiàng)目?jī)?nèi)的 react、react-dom 都能夠走 window 下掛載的對(duì)象。

/*?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

然后通過(guò) npm run start 正常啟動(dòng)項(xiàng)目就好了。

React App

接下來(lái)就能愉快的搞事情，可以在 Chrome 的 Sources 面板里面開始 debug 之旅了，當(dāng)然如果你更喜歡 console.log ，也可以在 public/react.js 里打上心愛的 log 。

Sources

調(diào)試 Vue

調(diào)試 Vue 比 React 更加簡(jiǎn)單，因?yàn)?Vue 支持瀏覽器進(jìn)行模板編譯。我們同樣在 CDN 直接下載已經(jīng)編譯好的完整開發(fā)版（https://www.jsdelivr.com/package/npm/vue?version=3.0.4&path=dist）。

image-20201205232605725

然后，新建一個(gè) vue.html ，把文件丟到本地的 http 服務(wù)里面。

<!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>

我們現(xiàn)在已經(jīng)可以直接開始調(diào)試 Vue3 的源碼了，就是這么簡(jiǎn)單粗暴。當(dāng)然，如果想通過(guò) .vue 的方式寫模板，還是得參照上面 React 提到的那種方式。

找準(zhǔn)切入點(diǎn)

有了調(diào)試源碼的方法，我們還需要找準(zhǔn)一個(gè)切入點(diǎn)，不能為了看源碼而看源碼。所謂的切入點(diǎn)就是一個(gè)個(gè)小問(wèn)題，比如我想要弄懂 Vue 的模板是如何轉(zhuǎn)變成虛擬 DOM 的，我們可以先在官方文檔查找資料，看有沒(méi)有相關(guān)說(shuō)明，幸運(yùn)的是，Vue 官方文檔在渲染函數(shù)-模板編譯部分剛好這個(gè)問(wèn)題有相關(guān)說(shuō)明。

Vue官方文檔

文檔中提到了 Vue.compile ，然后我們就可以在源碼中搜索這個(gè) Api 開始進(jìn)行調(diào)試。這就是帶著目的去看源碼，我們只有帶著問(wèn)題出發(fā)的時(shí)候，才會(huì)具有更高的效率。

除了帶著問(wèn)題出發(fā)，還可以參考其他優(yōu)秀的文章，集千萬(wàn)網(wǎng)友的智慧于一體。當(dāng)然這也是個(gè)雙刃劍，因?yàn)槟憧赡軙?huì)搜到一些辣雞文章，反而降低你的效率。而且，框架在迭代的過(guò)程中，變化會(huì)很多，可能你學(xué)習(xí)的是 React 16 的源碼，搜到的 React 15 相關(guān)的文章，然后你會(huì)花很多時(shí)間和精力想去弄清楚為什么你看到的和別人寫的為什么不一樣，到底是你的打開方式不對(duì)，還是作者有筆誤。

同時(shí)，還有一些文章喜歡畫一些吸引眼球的架構(gòu)圖（我本人），看完你會(huì)直呼內(nèi)行，但是這些架構(gòu)圖大多是站在作者個(gè)人的角度上的畫的，很可能和你之前的角度不一樣，又需要花一些時(shí)間來(lái)理解他的思路。如果，我們把龐大的項(xiàng)目拆分成一個(gè)個(gè)小小的問(wèn)題之后，逐個(gè)擊破，這時(shí)候再?gòu)娜值慕嵌葋?lái)思考整個(gè)框架的設(shè)計(jì)思路以及運(yùn)行邏輯，就能事半功倍。

強(qiáng)制輸出

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

我在看源碼的過(guò)程中，會(huì)一直思考，怎么樣才能將這部分講給別人聽，是不是能寫個(gè) Demo 之類的，讓大家跟著我的思路來(lái)學(xué)習(xí)。這樣即讓自己學(xué)懂了，又可以將學(xué)習(xí)的過(guò)程分享出來(lái)幫助到其他人，何樂(lè)而不為。

末尾

你好，我是若川，江湖人稱菜如若川，歷時(shí)一年只寫了一個(gè)學(xué)習(xí)源碼整體架構(gòu)系列~(點(diǎn)擊藍(lán)字了解我)

關(guān)注若川視野，回復(fù)"pdf" 領(lǐng)取優(yōu)質(zhì)前端書籍pdf，回復(fù)"加群"，可加群長(zhǎng)期交流學(xué)習(xí)

我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

覺得文章不錯(cuò)，可以點(diǎn)個(gè)在看呀^_^另外歡迎留言交流～

小提醒：若川視野公眾號(hào)面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點(diǎn)擊閱讀，也可以星標(biāo)我的公眾號(hào)，便于查找

總結(jié)

以上是生活随笔為你收集整理的找准切入点，调试看源码，事半功倍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：录屏软件——大黄蜂，rar压缩包，解压后
下一篇： airtest 不同目录下导入air文件