Ahooks 3.0 來了！高質(zhì)量可靠的 React Hooks 庫
ahooks[1] 是一套開源的 React Hooks 庫，封裝了大量好用的 Hooks。在當(dāng)前 React 項目研發(fā)過程中，一套好用的 React Hooks 庫是必不可少的，希望 ahooks 能成為您的選擇。
自 2019 年 8 月 ahooks(umi hooks)發(fā)布第一個版本，到今天已經(jīng)歷經(jīng)了 2 年的發(fā)展，在國內(nèi)外社區(qū)也獲得了很多同學(xué)的認(rèn)可。目前 ahooks 2.0 的成績主要包括：
在阿里內(nèi)部覆蓋了上千個前端應(yīng)用
- 開發(fā)了 60+ Hooks
- npm & tnpm 周下載量 7w+
- GitHub star 7.4k
在這兩年的發(fā)展過程中，隨著對 React Hooks 的理解越來越深入，我們能看到 ahooks 2.0 設(shè)計中的很多不足。在這個背景下，我們決定開發(fā) 3.0 版本。
ahooks 3.0 的目標(biāo)是建設(shè) 高質(zhì)量可靠的 React Hooks 庫，我們希望成為像 lodash 一樣的穩(wěn)定的基礎(chǔ)依賴。相較于 2.0，具有以下幾個優(yōu)勢：
- 全面支持 SSR
- 全新的 useRequest
- 所有的輸出函數(shù)地址是固定的，避免閉包問題
- DOM 類 Hooks 支持 target 動態(tài)變化
- 更合理的 API 設(shè)計
- 解決了在嚴(yán)格模式(Strict Mode)下的問題
- 解決了在 react-refresh(HRM)模式下的問題
- 新增了更多 Hooks
- 修復(fù)了很多已知問題
全面支持 SSR
React Hooks 在 SSR 場景下，普遍會碰到“DOM/BOM 缺失”、“useLayoutEffect 警告”兩個問題。ahooks v3.0 徹底解決了這兩個問題，你可以安心的將 ahooks 使用到 SSR 場景了。
更多內(nèi)容可以參考《React Hooks & SSR[2]》
全新的 useRequest
useRequest 是 ahooks 使用量最高的 Hook，同時也是 issue 量最多的 Hook?？偨Y(jié) useRequest 之前最大的問題是：
- 代碼拆分不合理，所有的功能混合在一個文件中，改動起來非常復(fù)雜
- 部分功能上線前沒有充分論證，導(dǎo)致功能設(shè)計不合理，但是也下不掉
- 融合了 pagination 和 loadMore 的邏輯，導(dǎo)致 ts 類型復(fù)雜到難以想象
ahooks v3.0 版本對 useRequest 進(jìn)行了完全重寫：
- 通過插件式組織代碼，核心代碼極其簡單，所有高級功能均是通過插件實現(xiàn)
- 仔細(xì)論證了提供的所有的能力，保證上線的特性均是最優(yōu)解。對存疑的能力，漸進(jìn)添加
- 所有的參數(shù)支持動態(tài)變化
- 刪除了 pagination 和 loadMore 邏輯，單獨拆分出其它 Hooks 提供相應(yīng)能力
- 避免了 ts 類型重載，可以更方面的基于 useRequest 封裝更高級的 Hooks
- 修復(fù)了大量遺留問題
更多內(nèi)容可以參考《全新的 useRequest[3]》
函數(shù)特殊處理，避免閉包問題
ahooks v3 通過對輸入輸出函數(shù)做特殊處理，盡力幫助大家避免閉包問題。這個能力我覺得是 ahooks 做的比較激進(jìn)的地方，但確實能對用戶提供非常好的使用體驗。
1.ahooks 所有的輸出函數(shù)，地址都是不會變化的
- const [state, setState] = React.useState();
眾所周知，React.useState 返回的 setState 函數(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 任何時候調(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
