[[439200]]

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

自 2019 年 8 月 ahooks(umi hooks)發(fā)布第一個(gè)版本，到今天已經(jīng)歷經(jīng)了 2 年的發(fā)展，在國內(nèi)外社區(qū)也獲得了很多同學(xué)的認(rèn)可。目前 ahooks 2.0 的成績主要包括：

在阿里內(nèi)部覆蓋了上千個(gè)前端應(yīng)用

• 開發(fā)了 60+ Hooks
• npm & tnpm 周下載量 7w+
• GitHub star 7.4k

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

ahooks 3.0 的目標(biāo)是建設(shè) 高質(zhì)量可靠的 React Hooks 庫，我們希望成為像 lodash 一樣的穩(wěn)定的基礎(chǔ)依賴。相較于 2.0，具有以下幾個(gè)優(yōu)勢：

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

全面支持 SSR

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

更多內(nèi)容可以參考《React Hooks & SSR[2]》

全新的 useRequest

useRequest 是 ahooks 使用量最高的 Hook，同時(shí)也是 issue 量最多的 Hook?？偨Y(jié) useRequest 之前最大的問題是：

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

ahooks v3.0 版本對 useRequest 進(jìn)行了完全重寫：

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

更多內(nèi)容可以參考《全新的 useRequest[3]》

函數(shù)特殊處理，避免閉包問題

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

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

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

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

2.所有用戶輸入的函數(shù)，永遠(yuǎn)使用最新的一份

對于接收的函數(shù)，ahooks v3 會做一次特殊處理，保證每次調(diào)用的函數(shù)永遠(yuǎn)是最新的。

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

比如以上示例，useInterval 任何時(shí)候調(diào)用的函數(shù)永遠(yuǎn)是最新的，也就是 state 永遠(yuǎn)是最新的。

更多內(nèi)容可以參考《ahooks 輸入輸出函數(shù)處理規(guī)范[4]》

更多問題修復(fù)

• DOM 類 Hooks 支持 target 動態(tài)變化，相關(guān)文檔可見《DOM 類 Hooks 使用規(guī)范[5]》
• v3 修復(fù)了在嚴(yán)格模式下的一些問題。參考《React Hooks & strict mode[6]》
• v3 修復(fù)了在 react-refresh(HRM)模式下的一些問題。參考《React Hooks & react-refresh(HMR)[7]》

更多改動參考《v2 to v3[8]》

結(jié)尾

ahooks v3.0 的 slogan 是“高質(zhì)量可靠的 React Hooks 庫”，這是我們?yōu)橹畩^斗的目標(biāo)，希望 ahooks 成為每一位開發(fā)者的必備基礎(chǔ)庫之一。

感謝 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 輸入輸出函數(shù)處理規(guī)范: https://ahooks.js.org/zh-CN/guide/blog/function

[5]DOM 類 Hooks 使用規(guī)范: 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