建站
咨詢
售后
建站咨詢
新聞中心
最近寫了很多源碼分析相關(guān)的文章，React、Vue 都有，想把我閱讀源碼的一些心得分享給大家。
創(chuàng)新互聯(lián)公司長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為泗洪企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計，泗洪網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
React：
- React 架構(gòu)的演變 - 從同步到異步
- React 架構(gòu)的演變 - 從遞歸到循環(huán)
- React 架構(gòu)的演變 - 更新機(jī)制
- React 架構(gòu)的演變 - Hooks 的實現(xiàn)
Vue：
- Vue 模板編譯原理
- Vue3 模板編譯優(yōu)化
- Vue3 Teleport 組件的實踐及原理
快速調(diào)試源碼
說到看源碼，很多人都有個誤區(qū)，覺得看源碼必須要到 github 上把完整的代碼 clone 下來，認(rèn)為只有把完整的代碼下載下來，才能開始愉快的學(xué)習(xí)。
調(diào)試 React
這里我們先拿 React 舉例，把源碼 clone 下之后，整個人都懵逼了。
- git clone git@github.com:facebook/react.git
React 源碼目錄解構(gòu)
一般這時候會開始在網(wǎng)上搜文章，如何調(diào)試 React 源碼。但是這種大型項目的構(gòu)建流程較為復(fù)雜，如果只是想簡單了解源碼，不需要去了解這些復(fù)雜的東西。這里教大家一個簡單的方案，直接到 CDN 上下載官方編譯好了的開發(fā)版源碼(https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.development.js)，中間的版本號可以替換成任何想看的版本。
react
有了源碼之后，我們要開始寫 Demo，這時候如果自己搭一個項目就比較麻煩了，因為寫 React 就會有 jsx，就需要 babel 進(jìn)行 jsx 轉(zhuǎn)義，這里推薦使用官方腳手架：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
然后，在文件夾內(nèi)新建 config-overrides.js 文件，配置 webpack 的 externals 屬性，讓項目內(nèi)的 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 之旅了，當(dāng)然如果你更喜歡 console.log ，也可以在 public/react.js 里打上心愛的 log 。
Sources
調(diào)試 Vue
調(diào)試 Vue 比 React 更加簡單，因為 Vue 支持瀏覽器進(jìn)行模板編譯。我們同樣在 CDN 直接下載已經(jīng)編譯好的完整開發(fā)版(https://www.jsdelivr.com/package/npm/vue?version=3.0.4&path=dist)。
image-20201205232605725
然后，新建一個 vue.html ，把文件丟到本地的 http 服務(wù)里面。
Vue3 Demo