Ahooks 3.0 來了！高質量可靠的 React Hooks 庫
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]》
更多問題修復
- DOM 類 Hooks 支持 target 動態變化，相關文檔可見《DOM 類 Hooks 使用規范[5]》
- v3 修復了在嚴格模式下的一些問題。參考《React Hooks & strict mode[6]》
- v3 修復了在 react-refresh(HRM)模式下的一些問題。參考《React Hooks & react-refresh(HMR)[7]》
更多改動參考《v2 to v3[8]》
結尾
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
