資訊專欄INFORMATION COLUMN
這是講 ahooks 源碼的第一篇文章，簡要就是以下幾點：
加深對 React hooks 的理解。
學習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。
培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。
注：本系列對 ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情。
第一篇主要介紹 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 數為9.2k，也算是社區比較活躍。
ahooks
簡介
官方介紹如下：
ahooks，發音 [e? h?ks]，是一套高質量可靠的 React Hooks 庫。在當前 React 項目研發過程中，一套好用的 React Hooks 庫是必不可少的，希望 ahooks 能成為您的選擇。
特點
它具有如下特點：
易學易用。
支持 SSR。
將訪問 DOM/BOM 的方法放在 useEffect 中（服務端不會執行），避免服務端執行時報錯。
源碼中可以看到很多isBrowser的判斷，主要是區分開瀏覽器環境和服務器環境。
對輸入輸出函數做了特殊處理，且避免閉包問題。
輸入的函數，永遠都是使用最新的一份。這個是通過useRef進行實現。
輸出函數，地址都是不會變化的，這個是通過useMemoizedFn（ahooks 封裝的）實現的，其實現也是通過useRef實現。后面我們會提到。
包含大量提煉自業務的高級 Hooks。
包含豐富的基礎 Hooks。
使用 TypeScript 構建，提供完整的類型定義文件?？梢詫W習一些 TypeScript 的技巧。
hooks 種類
ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分類提供了常用的 Hooks。如下所示：
ahooks 整體架構
項目啟動
這是要先做準備，先從 ahooks 中 folk一份，clone 下來?！?/p>
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 的特點簡介和整體結構，后續有更多精彩內容，歡迎大家繼續關注。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/128268.html
起因 社會在不斷的向前，技術也在不斷的完善進步。從 React Hooks 正式發布到現在，越來越多的項目正在使用 Function Component 替代 Class Component，Hooks 這一新特性也逐漸被廣泛的使用。 這樣的解析是不是很熟悉，在日常中時常都有用到，但也有一個可以解決這樣重復的就是對數據請求的邏輯處理，對防抖節流的邏輯處理等。 另一方面，由于 Hoo...
之所以講這篇文章主要是為了加深對 React hooks 的理解?！ ∫虼耍纫獙W習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫?！ ∏遗囵B閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇?！ ‖F在看下ahooks 是怎么封裝 cookie/localStorage/sessionStorage 的。 cookie ahooks 封裝了 useCookie...
本篇主要和大家溝通關于ahooks ，我們可以理解為加深對 React hooks 的了解?！ ∥覀兿日f下關于抽象自定義 hooks。構建屬于自己的 React hooks 工具庫?！ ∑鋵嵨覀儜撆囵B閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。 注：本系列對 ahooks 的源碼解析是基于v3.3.13。 現在就進入主題用ahooks 來封裝 React要注意的時機？ Fun...
想必大家都能看得懂的源碼 ahooks 整體架構篇，且可以使用插件化機制優雅的封裝你的請求hook，現在我們就探討下ahooks 是怎么解決 React 的閉包問題的？?！ eact 的閉包問題 先來看一個例子： importReact,{useState,useEffect}from"react"; exportdefault()=>{ const[c...
我們講述的是關于 ahooks 源碼系列文章的第七篇，總結主要講述下面幾點： 鞏固 React hooks 的理解。 學習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。 培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇?！ ∽ⅲ罕鞠盗袑?ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情?！ ?..
閱讀 561·2023-03-27 18:33
閱讀 750·2023-03-26 17:27
閱讀 647·2023-03-26 17:14
閱讀 603·2023-03-17 21:13
閱讀 537·2023-03-17 08:28
閱讀 1823·2023-02-27 22:32
閱讀 1315·2023-02-27 22:27
閱讀 2199·2023-01-20 08:28
