ahooks 3.0 來(lái)了! 可能是國(guó)內(nèi)最好的高質(zhì)量可靠的 React Hooks 庫(kù)

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

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

• 在阿里內(nèi)部覆蓋了上千個(gè)前端應(yīng)用
• 開(kāi)發(fā)了 60+ Hooks
• npm & tnpm 周下載量 7w+
• GitHub star 7.4k

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

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

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

全面支持 SSR

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

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

全新的 useRequest

useRequest 是 ahooks 使用量最高的 Hook，同時(shí)也是 issue 量最多的 Hook。總結(jié) useRequest 之前最大的問(wèn)題是：

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

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

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

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

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

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

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

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

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

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

對(duì)于接收的函數(shù)，ahooks v3 會(huì)做一次特殊處理，保證每次調(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]》

更多問(wèn)題修復(fù)

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

更多改動(dòng)參考《v2 to v3^[8]》

結(jié)尾

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

感謝 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]

參考資料