可能是你見過最好的 React Hooks 庫

點(diǎn)擊上方“前端技術(shù)磚家”關(guān)注?

ahooks[1] 是由螞蟻 umi 團(tuán)隊(duì)、淘系 ice 團(tuán)隊(duì)以及阿里體育團(tuán)隊(duì)共同建設(shè)的 React Hooks 工具庫。ahooks 基于 React Hooks 的邏輯封裝能力，提供了大量常見好用的 Hooks，可以極大降低代碼復(fù)雜度，提升開發(fā)效率。
ahooks 致力成為和 antd/fusion 一樣的 React 基礎(chǔ)設(shè)施，幫助開發(fā)者在邏輯層面省去大量的重復(fù)工作。

ahooks 前身

ahooks 的前身是螞蟻開源的 @umijs/hooks[2]，可以說 ahooks 是 umi hooks 的 2.0 版本。
umi hooks 從 2019年9月 發(fā)布 v1.0 之后，一路前行，得到了不少用戶的青睞。截至當(dāng)前，umi hooks 在社區(qū)收獲了 2.2k star，npm 周下載量最高 7000+，tnpm 周下載量 8000+。
同時(shí)在螞蟻內(nèi)部，umi hooks 也已經(jīng)成為標(biāo)準(zhǔn) React Hooks 庫，截至當(dāng)前，能統(tǒng)計(jì)到的項(xiàng)目中有 600+ 項(xiàng)目依賴了 umi hooks。并且 useRequest[3] 也已經(jīng)成為 umi3 內(nèi)置請求方案[4]。
但 umi hooks 半年來的野蠻生長，也帶來了一些副作用。

• 部分 Hooks 設(shè)計(jì)不合理，后期進(jìn)行了部分 Hooks 合并，廢棄了一些 Hooks。
• 沒有制定 API 標(biāo)準(zhǔn)，導(dǎo)致已有 Hooks 的 API 格式與命名不統(tǒng)一。

我們希望有個(gè)機(jī)會(huì)能徹底解決這兩個(gè)心病。

共建

隨著 React Hooks 的發(fā)展，各個(gè)團(tuán)隊(duì)都開始嘗試使用 Hooks 代替 Class，Hooks 正逐漸成為 React 組件的主流寫法。得益于 Hooks 的邏輯封裝能力，我們可以將常見的邏輯封裝起來，以減少代碼復(fù)雜度。或者使用社區(qū)上別人封裝的 Hooks，比如 react-use[5] 等。
當(dāng)然出于種種原因，很多團(tuán)隊(duì)希望建設(shè)自己的 Hooks 庫。但在建設(shè)過程中，能發(fā)現(xiàn)各個(gè) Hooks 庫提供的 Hooks 大同小異，尤其是基礎(chǔ)類 Hooks 幾乎都是一樣的。
基于避免重復(fù)建設(shè)的目的，以及 umi hooks 的積累，我們與集團(tuán) ice 團(tuán)隊(duì)，阿里體育團(tuán)隊(duì)一拍即合，決定基于 umi hooks 共同建設(shè) React Hooks 工具庫，ahooks 隨即誕生。

現(xiàn)狀

經(jīng)過一個(gè)半月的改造，ahooks 已經(jīng)發(fā)布了 v1.0 版本，并開源在 https://github.com/alibaba/hooks[6] 倉庫，你可以放心的在生產(chǎn)環(huán)境使用。
ahooks 相較于 umi hooks，有了自己的 API 規(guī)范[7]，我們基于這套規(guī)范，重新整理了所有 Hooks 的 API，你可以在這里[8]找到升級詳情。
在 ahooks 的開發(fā)過程中，集團(tuán)內(nèi)也有其它很多部門參與進(jìn)來，出謀劃策，感謝大家。

規(guī)劃

如前面所說，ahooks 致力成為向 antd/fusion 一樣的 React 基礎(chǔ)設(shè)施。為了達(dá)到這個(gè)目標(biāo)，我們正在全力開發(fā)更多的 Hooks，同時(shí)我們也期望大家能將日常封裝的 Hooks 貢獻(xiàn)到 ahooks 中，一起來幫助 ahooks 成長。

• 你可以提交一個(gè) RFC，我們會(huì)幫你評估 Hooks 的必要性及 API 的規(guī)范。
• 你也可以提交一個(gè) idea，我們幫你實(shí)現(xiàn)。

除了 Hooks 庫，我們也在準(zhǔn)備 React Hooks 系列教程。不得不承認(rèn)，雖然 React Hooks 很好用，但其中確實(shí)有有不少的明坑暗坑，我們希望通過系列教程，減少大家在使用 Hooks 時(shí)的困惑，避免走彎路。

可以不用看的附錄

• 推薦之前的幾篇文章，可以幫助你對 umi hooks/ahooks 有一個(gè)更深入的認(rèn)識：

  • 《React Hooks 在螞蟻金服的實(shí)踐[9]》
  • 《Umi Hooks - 助力擁抱 React Hooks[10]》
  • 《useRequest- 螞蟻中臺標(biāo)準(zhǔn)請求 Hooks[11]》

• 應(yīng)該很多人想問，為什么不直接用 react-use，而是要自己建設(shè) React Hooks 庫呢？

  • 正如之前很多文章中說的，react-use 大版本升級太快了，實(shí)在跟不上。我第一次用的時(shí)候是 v9，上次寫文章的時(shí)候是 v13，現(xiàn)在是 v15。如果大面積使用起來，升級起來太麻煩了。
  • 另外一點(diǎn)就是 react-use 的 API 設(shè)計(jì)也是沒有規(guī)范的，同類 Hooks 的 API 各種各樣。
  • 當(dāng)然不可否認(rèn)的是，react-use 是社區(qū)最流行的 Hooks 庫，為 ahooks 提供了很多靈感。

Reference

ahooks: https://github.com/alibaba/hooks

@umijs/hooks: https://github.com/umijs/hooks

useRequest: https://ahooks.js.org/zh-CN/hooks/async

內(nèi)置請求方案: https://umijs.org/plugins/plugin-request

react-use: https://github.com/streamich/react-use

https://github.com/alibaba/hooks: https://github.com/alibaba/hooks

API 規(guī)范: https://ahooks.js.org/zh-CN/docs/api

這里: https://ahooks.js.org/zh-CN/docs/umi-hooks-to-ahooks

React Hooks 在螞蟻金服的實(shí)踐: https://zhuanlan.zhihu.com/p/94030173

Umi Hooks - 助力擁抱 React Hooks: https://zhuanlan.zhihu.com/p/103150605

useRequest- 螞蟻中臺標(biāo)準(zhǔn)請求 Hooks: https://zhuanlan.zhihu.com/p/106796295

推薦閱讀