ahooks整體架構(gòu)及React工具庫(kù)源碼解讀

更新時(shí)間：2022年07月11日 11:06:05 作者：Gopal

這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫(kù)的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

本文是深入淺出 ahooks 源碼系列文章的第一篇，這個(gè)系列的目標(biāo)主要有以下幾點(diǎn)：

加深對(duì) React hooks 的理解。
學(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫(kù)。
培養(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫(kù)是一個(gè)對(duì)源碼閱讀不錯(cuò)的選擇。

注：本系列對(duì) ahooks 的源碼解析是基于 v3.3.13。自己 folk 了一份源碼，主要是對(duì)源碼做了一些解讀，可見(jiàn) 詳情。

第一篇主要介紹 ahooks 的背景以及整體架構(gòu)。

React hooks utils 庫(kù)

自從 React 16.8 版本推出 React hooks，越來(lái)越多的項(xiàng)目使用 Function Component。React hooks utils 庫(kù)隨即誕生，它主要解決的兩個(gè)問(wèn)題如下：

公共邏輯的抽象。
解決 React hooks 存在的弊端，比如閉包等。

那現(xiàn)在社區(qū)有哪些比較優(yōu)秀的 React Hooks utils 庫(kù)呢？

react-use 是社區(qū)比較活躍的 React hooks utils 庫(kù)，它的 star 數(shù)達(dá)到了 29.6k。它的功能非常強(qiáng)大，擁有的 hooks 已經(jīng) 100+。假如你需要功能比較齊全，可以考慮選擇 react-use。

如果不需要非常齊全的功能，只需要一些常見(jiàn)的功能，react-use 可能會(huì)稍微冗余了，可以考慮我們今天的主角——ahooks，目前它的 star 數(shù)為 9.2k，也算是社區(qū)比較活躍。

ahooks

簡(jiǎn)介

官方介紹如下：

ahooks，發(fā)音 [e? h?ks]，是一套高質(zhì)量可靠的 React Hooks 庫(kù)。在當(dāng)前 React 項(xiàng)目研發(fā)過(guò)程中，一套好用的 React Hooks 庫(kù)是必不可少的，希望 ahooks 能成為您的選擇。

特點(diǎn)

它具有如下特點(diǎn)：

易學(xué)易用。
支持 SSR。
- 將訪問(wèn) DOM/BOM 的方法放在 useEffect 中（服務(wù)端不會(huì)執(zhí)行），避免服務(wù)端執(zhí)行時(shí)報(bào)錯(cuò)。
- 源碼中可以看到很多 isBrowser 的判斷，主要是區(qū)分開(kāi)瀏覽器環(huán)境和服務(wù)器環(huán)境。
對(duì)輸入輸出函數(shù)做了特殊處理，且避免閉包問(wèn)題。
- 輸入的函數(shù)，永遠(yuǎn)都是使用最新的一份。這個(gè)是通過(guò) useRef 進(jìn)行實(shí)現(xiàn)。
- 輸出函數(shù)，地址都是不會(huì)變化的，這個(gè)是通過(guò) useMemoizedFn（ahooks 封裝的）實(shí)現(xiàn)的，其實(shí)現(xiàn)也是通過(guò) useRef 實(shí)現(xiàn)。后面我們會(huì)提到。
包含大量提煉自業(yè)務(wù)的高級(jí) Hooks。
包含豐富的基礎(chǔ) Hooks。
使用 TypeScript 構(gòu)建，提供完整的類型定義文件?？梢詫W(xué)習(xí)一些 TypeScript 的技巧。

hooks 種類

ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分類提供了常用的 Hooks。如下所示：

ahooks 整體架構(gòu)

項(xiàng)目啟動(dòng)

我們先從 ahooks 中 folk 一份，clone 下來(lái)。

yarn run init
yarn start

如果你能成功跑起服務(wù)，就會(huì)看到和官方文檔一模一樣的頁(yè)面。

整體結(jié)構(gòu)

從倉(cāng)庫(kù)的根目錄的 package.json 中可以得到以下信息。

文檔是使用 dumi。是一款為組件開(kāi)發(fā)場(chǎng)景而生的文檔工具。
該項(xiàng)目是一個(gè) monoRepo。它的項(xiàng)目管理是通過(guò) lerna 進(jìn)行管理的。
單元測(cè)試是通過(guò) jest 實(shí)現(xiàn)。

它的目錄結(jié)構(gòu)中，可以看到 docs 中存放倉(cāng)庫(kù)公共文檔。packages 中存放兩個(gè)包，hooks 和 use-url-state。整體的結(jié)構(gòu)跟 dumi 中給出的 lerna 項(xiàng)目的結(jié)構(gòu)相似。其中每個(gè)包下面的每個(gè)組件都可以書(shū)寫對(duì)應(yīng)的文檔，不一樣的是，hooks 中每個(gè)組件多了 __tests__ 文件夾，這個(gè)是用來(lái)寫單元測(cè)試的。

可以用以下一張圖，大致總結(jié)一下 ahooks 的工程架構(gòu)：

hooks

剛剛也提到，ahooks 是采用了 monoRepo 的方式，我們的源碼都是在 packages 中，我們來(lái)看下 hooks。先看 packages/hooks/package.json。另外要使用 useUrlState 這個(gè) hook，需要獨(dú)立安裝 @ahooksjs/use-url-state，其源碼在 packages/use-url-state 中。我理解官方的用意應(yīng)該是這個(gè)庫(kù)依賴于 react-router，可能有一些項(xiàng)目不需要用到，把它提出來(lái)有助于減少包的大小。

npm i @ahooksjs/use-url-state -S

回到 packages/hooks。重點(diǎn)關(guān)注一下 dependencies 和 peerDependencies?？梢钥吹狡鋵?shí)它內(nèi)部還是使用了一些其他的工具庫(kù)的，比如 lodash（估計(jì)是避免重復(fù)造輪子，但感覺(jué)這樣會(huì)導(dǎo)致包會(huì)變大）。后面我們也會(huì)對(duì)這些工具庫(kù)做一個(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 包，最終解決插件與所依賴包不一致的問(wèn)題。這里的宿主環(huán)境一般指的就是我們自己的項(xiàng)目本身了。

這對(duì)于封裝 npm 包非常重要。當(dāng)你寫的包 a 里面依賴另一個(gè)包 b，而這個(gè)包 b 是引用這個(gè)包 a 的業(yè)務(wù)的常用的包的時(shí)候，建議寫在 peerDependencies 里，避免重復(fù)下載/多個(gè)版本共存。