作為系列的第一篇,介紹了 React hooks utils 庫的背景以及 ahooks 的特點簡介和整體結構,接下來會探索各個常見的 hooks 方法實現,敬請期待。 ...
本文是深入淺出 ahooks 源碼系列文章的第一篇,該系列已整理成文檔-地址。覺得還不錯,給個 star 支持一下哈,Thanks。
第一篇主要介紹 ahooks 的背景以及整體架構。
React hooks utils 庫
自從 React 16.8 版本推出 React hooks,越來越多的項目使用 Function Component。React hooks utils 庫隨即誕生,它主要解決的兩個問題如下:
- 公共邏輯的抽象。
- 解決 React hooks 存在的弊端,比如閉包等。
那現在社區有哪些比較優秀的 React Hooks utils 庫呢?
react-use 是社區比較活躍的 React hooks utils 庫,它的 star 數達到了 29.6k
。它的功能非常強大,擁有的 hooks 已經 100+。假如你需要功能比較齊全,可以考慮選擇 react-use。
如果不需要非常齊全的功能,只需要一些常見的功能,react-use 可能會稍微冗餘了,可以考慮我們今天的主角——ahooks,目前它的 star 數為 10k
(2022.08.10),也算是社區比較活躍。
ahooks
簡介
官方介紹如下:
ahooks,發音 [eɪ hʊks],是一套高質量可靠的 React Hooks 庫。在當前 React 項目研發過程中,一套好用的 React Hooks 庫是必不可少的,希望 ahooks 能成為您的選擇。
特點
它具有如下特點:
- 易學易用。
- 支持 SSR。
- 將訪問 DOM/BOM 的方法放在 useEffect 中(服務端不會執行),避免服務端執行時報錯。
- 源碼中可以看到很多
isBrowser
的判斷,主要是區分開瀏覽器環境和伺服器環境。
- 對輸入輸出函數做了特殊處理,且避免閉包問題。
- 輸入的函數,永遠都是使用最新的一份。這個是通過
useRef
進行實現。 - 輸出函數,地址都是不會變化的,這個是通過
useMemoizedFn
(ahooks 封裝的)實現的,其內部實現也是通過useRef
實現。後面我們會提到。
- 輸入的函數,永遠都是使用最新的一份。這個是通過
- 包含大量提煉自業務的高級 Hooks。
- 包含豐富的基礎 Hooks。
- 使用 TypeScript 構建,提供完整的類型定義文件。可以學習一些 TypeScript 的技巧。
hooks 種類
ahooks 基於 UI、SideEffect、LifeCycle、State、DOM 等分類提供了常用的 Hooks。如下所示:
ahooks 整體架構
項目啟動
我們先從 ahooks 中 folk 一份,clone 下來。(當時我 folk 的時候還是用的 yarn,現在應該是用 pnpm,猜測是性能有關)。
yarn run init
yarn start
如果你能成功跑起服務,就會看到和官方文檔一模一樣的頁面。
整體結構
從倉庫的根目錄的 package.json 中可以得到以下信息。
- 文檔是使用
dumi
。是一款為組件開發場景而生的文檔工具。 - 該項目是一個
monoRepo
。它的項目管理是通過 lerna 進行管理的。 - 單元測試是通過 jest 實現。
它的目錄結構中,可以看到 docs 中存放倉庫公共文檔。packages 中存放兩個包,hooks 和 use-url-state。整體的結構跟 dumi 中給出的 lerna 項目的結構相似。其中每個包下麵的每個組件都可以書寫對應的文檔,不一樣的是,hooks 中每個組件多了 __tests__
文件夾,這個是用來寫單元測試的。
可以用以下一張圖,大致總結一下 ahooks 的工程架構:
hooks
剛剛也提到,ahooks 是採用了 monoRepo
的方式,我們的源碼都是在 packages 中,我們來看下 hooks。先看 packages/hooks/package.json
。另外要使用 useUrlState 這個 hook,需要獨立安裝 @ahooksjs/use-url-state
,其源碼在 packages/use-url-state
中。我理解官方的用意應該是這個庫依賴於 react-router,可能有一些項目不需要用到,把它提出來有助於減少包的大小。
npm i @ahooksjs/use-url-state -S
回到 packages/hooks
。重點關註一下 dependencies 和 peerDependencies。可以看到其實它內部還是使用了一些其他的工具庫的,比如 lodash(主要是避免重覆造輪子,但感覺這樣會導致包會變大)。後面我們也會對這些工具庫做一個探索。
"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
的目的是提示宿主環境去安裝滿足插件peerDependencies
所指定依賴的包,然後在插件import
或者require
所依賴的包的時候,永遠都是引用宿主環境統一安裝的npm
包,最終解決插件與所依賴包不一致的問題。這裡的宿主環境一般指的就是我們自己的項目本身了。
這對於封裝 npm 包非常重要。當你寫的包 a 裡面依賴另一個包 b,而這個包 b 是引用這個包 a 的業務的常用的包的時候,建議寫在 peerDependencies
里,避免重覆下載/多個版本共存。
總結
作為系列的第一篇,介紹了 React hooks utils 庫的背景以及 ahooks 的特點簡介和整體結構,接下來會探索各個常見的 hooks 方法實現,敬請期待。