建站
咨詢
售后
建站咨詢
新聞中心
- 加深對 React hooks 的理解。
- 學(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫。
- 培養(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫是一個(gè)對源碼閱讀不錯的選擇。
注：本系列對 ahooks 的源碼解析是基于 v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見 詳情[1]。
創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元鹽湖做網(wǎng)站,已為上家服務(wù),為鹽湖各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
第一篇主要介紹 ahooks 的背景以及整體架構(gòu)。
React hooks utils 庫
自從 React 16.8 版本推出 React hooks，越來越多的項(xiàng)目使用 Function Component。React hooks utils 庫隨即誕生，它主要解決的兩個(gè)問題如下：
- 公共邏輯的抽象。
- 解決 React hooks 存在的弊端，比如閉包等。
那現(xiàn)在社區(qū)有哪些比較優(yōu)秀的 React Hooks utils 庫呢？
react-use[2] 是社區(qū)比較活躍的 React hooks utils 庫，它的 star 數(shù)達(dá)到了 29.6k。它的功能非常強(qiáng)大，擁有的 hooks 已經(jīng) 100+。假如你需要功能比較齊全，可以考慮選擇 react-use。
如果不需要非常齊全的功能，只需要一些常見的功能，react-use 可能會稍微冗余了，可以考慮我們今天的主角——ahooks[3]，目前它的 star 數(shù)為 9.2k，也算是社區(qū)比較活躍。
ahooks
簡介
官方介紹如下：
ahooks，發(fā)音 [e? h?ks]，是一套高質(zhì)量可靠的 React Hooks 庫。在當(dāng)前 React 項(xiàng)目研發(fā)過程中，一套好用的 React Hooks 庫是必不可少的，希望 ahooks 能成為您的選擇。
特點(diǎn)
它具有如下特點(diǎn)：
- 易學(xué)易用。
- 支持 SSR。
將訪問 DOM/BOM 的方法放在 useEffect 中（服務(wù)端不會執(zhí)行），避免服務(wù)端執(zhí)行時(shí)報(bào)錯。
源碼中可以看到很多isBrowser 的判斷，主要是區(qū)分開瀏覽器環(huán)境和服務(wù)器環(huán)境。
- 對輸入輸出函數(shù)做了特殊處理，且避免閉包問題。
輸入的函數(shù)，永遠(yuǎn)都是使用最新的一份。這個(gè)是通過 useRef 進(jìn)行實(shí)現(xiàn)。
輸出函數(shù)，地址都是不會變化的，這個(gè)是通過 useMemoizedFn（ahooks 封裝的）實(shí)現(xiàn)的，其實(shí)現(xiàn)也是通過 useRef 實(shí)現(xiàn)。后面我們會提到。
- 包含大量提煉自業(yè)務(wù)的高級 Hooks。
- 包含豐富的基礎(chǔ) Hooks。
- 使用 TypeScript 構(gòu)建，提供完整的類型定義文件。可以學(xué)習(xí)一些 TypeScript 的技巧。
hooks 種類
ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分類提供了常用的 Hooks。如下所示：
ahooks 整體架構(gòu)
項(xiàng)目啟動
我們先從 ahooks 中 folk 一份[4]，clone 下來。
yarn run init
yarn start
如果你能成功跑起服務(wù)，就會看到和官方文檔一模一樣的頁面。
整體結(jié)構(gòu)
從倉庫的根目錄的 package.json 中可以得到以下信息。
- 文檔是使用dumi。是一款為組件開發(fā)場景而生的文檔工具。
- 該項(xiàng)目是一個(gè)monoRepo。它的項(xiàng)目管理是通過lerna[5]進(jìn)行管理的。
- 單元測試是通過 jest 實(shí)現(xiàn)。
它的目錄結(jié)構(gòu)中，可以看到 docs 中存放倉庫公共文檔。packages 中存放兩個(gè)包，hooks 和 use-url-state。整體的結(jié)構(gòu)跟 dumi 中給出的 lerna 項(xiàng)目的結(jié)構(gòu)相似。其中每個(gè)包下面的每個(gè)組件都可以書寫對應(yīng)的文檔，不一樣的是，hooks 中每個(gè)組件多了 __tests__ 文件夾，這個(gè)是用來寫單元測試的。
跟 hooks 相似的組織形式
可以用以下一張圖，大致總結(jié)一下 ahooks 的工程架構(gòu)：
hooks
剛剛也提到，ahooks 是采用了 monoRepo? 的方式，我們的源碼都是在 packages 中，我們來看下 hooks。先看 packages/hooks/package.json?。另外要使用 useUrlState 這個(gè) hook，需要獨(dú)立安裝 @ahooksjs/use-url-state?，其源碼在 packages/use-url-state 中。我理解官方的用意應(yīng)該是這個(gè)庫依賴于 react-router，可能有一些項(xiàng)目不需要用到，把它提出來有助于減少包的大小。
npm i @ahooksjs/use-url-state -S
回到 packages/hooks。重點(diǎn)關(guān)注一下 dependencies 和 peerDependencies?？梢钥吹狡鋵?shí)它內(nèi)部還是使用了一些其他的工具庫的，比如 lodash（估計(jì)是避免重復(fù)造輪子，但感覺這樣會導(dǎo)致包會變大）。后面我們也會對這些工具庫做一個(gè)探索。
"dependencies": {
"@types/js-cookie": "^2.x.x",
"ahooks-v3-count": "^1.0.0",
"dayjs": "^1.9.1",
"intersection-observer": "^0.12.0",
"js-cookie": "^2.x.x",
"lodash": "^4.17.21",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},另外解釋下 peerDependencies。
peerDependencies? 的目的是提示宿主環(huán)境去安裝滿足插件 peerDependencies? 所指定依賴的包，然后在插件 import? 或者 require? 所依賴的包的時(shí)候，永遠(yuǎn)都是引用宿主環(huán)境統(tǒng)一安裝的 npm 包，最終解決插件與所依賴包不一致的問題。這里的宿主環(huán)境一般指的就是我們自己的項(xiàng)目本身了。
這對于封裝 npm 包非常重要。當(dāng)你寫的包 a 里面依賴另一個(gè)包 b，而這個(gè)包 b 是引用這個(gè)包 a 的業(yè)務(wù)的常用的包的時(shí)候，建議寫在 peerDependencies 里，避免重復(fù)下載/多個(gè)版本共存。
總結(jié)
作為系列的第一篇，介紹了 React hooks utils 庫的背景以及 ahooks 的特點(diǎn)簡介和整體架構(gòu)，接下來會探索各個(gè)常見的 hooks 方法實(shí)現(xiàn)，敬請期待。
參考
ahooks 正式發(fā)布：值得擁抱的 React Hooks 工具庫[6]。
參考資料
[1]詳情: https://github.com/GpingFeng/hooks
[2]react-use: https://github.com/streamich/react-use
[3]ahooks: https://ahooks.js.org/zh-CN/guide
[4]一份: https://github.com/GpingFeng/hooks
[5]lerna: https://www.lernajs.cn/
[6]ahooks 正式發(fā)布：值得擁抱的 React Hooks 工具庫: https://developer.aliyun.com/article/768059?
網(wǎng)頁名稱：大家都能看得懂的源碼之 Ahooks 整體架構(gòu)篇
文章地址：http://www.dlmjj.cn/article/dpodoic.html
