Ahooks 3.0 來了！高質量可靠的 React Hooks 庫

作者：磚家 2021-12-08 07:49:46

開發前端

ahooks v3.0 的 slogan 是“高質量可靠的 React Hooks 庫”，這是我們為之奮斗的目標，希望 ahooks 成為每一位開發者的必備基礎庫之一。

[[439200]]

ahooks[1] 是一套開源的 React Hooks 庫，封裝了大量好用的 Hooks。在當前 React 項目研發過程中，一套好用的 React Hooks 庫是必不可少的，希望 ahooks 能成為您的選擇。

自 2019 年 8 月 ahooks(umi hooks)發布第一個版本，到今天已經歷經了 2 年的發展，在國內外社區也獲得了很多同學的認可。目前 ahooks 2.0 的成績主要包括：

在阿里內部覆蓋了上千個前端應用

開發了 60+ Hooks
npm & tnpm 周下載量 7w+
GitHub star 7.4k

在這兩年的發展過程中，隨著對 React Hooks 的理解越來越深入，我們能看到 ahooks 2.0 設計中的很多不足。在這個背景下，我們決定開發 3.0 版本。

ahooks 3.0 的目標是建設高質量可靠的 React Hooks 庫，我們希望成為像 lodash 一樣的穩定的基礎依賴。相較于 2.0，具有以下幾個優勢：

全面支持 SSR
全新的 useRequest
所有的輸出函數地址是固定的，避免閉包問題
DOM 類 Hooks 支持 target 動態變化
更合理的 API 設計
解決了在嚴格模式(Strict Mode)下的問題
解決了在 react-refresh(HRM)模式下的問題
新增了更多 Hooks
修復了很多已知問題

全面支持 SSR

React Hooks 在 SSR 場景下，普遍會碰到“DOM/BOM 缺失”、“useLayoutEffect 警告”兩個問題。ahooks v3.0 徹底解決了這兩個問題，你可以安心的將 ahooks 使用到 SSR 場景了。

更多內容可以參考《React Hooks & SSR[2]》

全新的 useRequest

useRequest 是 ahooks 使用量最高的 Hook，同時也是 issue 量最多的 Hook。總結 useRequest 之前最大的問題是：

代碼拆分不合理，所有的功能混合在一個文件中，改動起來非常復雜
部分功能上線前沒有充分論證，導致功能設計不合理，但是也下不掉
融合了 pagination 和 loadMore 的邏輯，導致 ts 類型復雜到難以想象

ahooks v3.0 版本對 useRequest 進行了完全重寫：

通過插件式組織代碼，核心代碼極其簡單，所有高級功能均是通過插件實現
仔細論證了提供的所有的能力，保證上線的特性均是最優解。對存疑的能力，漸進添加
所有的參數支持動態變化
刪除了 pagination 和 loadMore 邏輯，單獨拆分出其它 Hooks 提供相應能力
避免了 ts 類型重載，可以更方面的基于 useRequest 封裝更高級的 Hooks
修復了大量遺留問題

更多內容可以參考《全新的 useRequest[3]》

函數特殊處理，避免閉包問題

ahooks v3 通過對輸入輸出函數做特殊處理，盡力幫助大家避免閉包問題。這個能力我覺得是 ahooks 做的比較激進的地方，但確實能對用戶提供非常好的使用體驗。

1.ahooks 所有的輸出函數，地址都是不會變化的

const [state, setState] = React.useState();

眾所周知，React.useState 返回的 setState 函數地址是固定的，使用時不需要考慮奇奇怪怪的問題，不需要把 setState 放到各種依賴中。ahooks v3.0 所有 Hooks 返回的函數，都擁有和 setState 一樣的特性，地址不會變化，放心大膽的使用即可。

2.所有用戶輸入的函數，永遠使用最新的一份

對于接收的函數，ahooks v3 會做一次特殊處理，保證每次調用的函數永遠是最新的。

const [state, setState] = useState(); 
 
useInterval(() => { 
  console.log(state); 
}, 1000);

比如以上示例，useInterval 任何時候調用的函數永遠是最新的，也就是 state 永遠是最新的。

更多內容可以參考《ahooks 輸入輸出函數處理規范[4]》

結尾

ahooks v3.0 的 slogan 是“高質量可靠的 React Hooks 庫”，這是我們為之奮斗的目標，希望 ahooks 成為每一位開發者的必備基礎庫之一。

感謝 ahooks 的共建者和使用者!歡迎試用 v3.0!

$ npm install --save ahooks@next 
# or 
$ yarn add ahooks@next

文檔：https://ahooks.js.org/zh-CN[9]

源碼：https://github.com/alibaba/hooks[10]

參考資料

[1]ahooks: https://github.com/alibaba/hooks

[2]React Hooks & SSR: https://ahooks.js.org/zh-CN/guide/blog/SSR/

[3]全新的 useRequest: https://ahooks.js.org/zh-CN/guide/upgrade#%E5%85%A8%E6%96%B0%E7%9A%84-userequest

[4]ahooks 輸入輸出函數處理規范: https://ahooks.js.org/zh-CN/guide/blog/function

[5]DOM 類 Hooks 使用規范: https://ahooks.js.org/zh-CN/guide/dom

[6]React Hooks & strict mode: https://ahooks.js.org/zh-CN/guide/blog/strict

[7]React Hooks & react-refresh(HMR): https://ahooks.js.org/zh-CN/guide/blog/hmr

[8]v2 to v3: https://ahooks.js.org/zh-CN/guide/upgrade

[9]https://ahooks.js.org/zh-CN: https://ahooks.js.org/zh-CN

[10]https://github.com/alibaba/hooks: https://github.com/alibaba/hooks

責任編輯：姜華來源：前端技術磚家

Ahooks 3.0 來了！高質量可靠的 React Hooks 庫

全面支持 SSR

全新的 useRequest

更多問題修復

結尾

參考資料