可能是你見過最好的 React Hooks 庫
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)置請(qǐng)求方案[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]找到升級(jí)詳情。
在 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ì)幫你評(píng)估 Hooks 的必要性及 API 的規(guī)范。 你也可以提交一個(gè) idea,我們幫你實(shí)現(xiàn)。
除了 Hooks 庫,我們也在準(zhǔn)備 React Hooks 系列教程。不得不承認(rèn),雖然 React Hooks 很好用,但其中確實(shí)有有不少的明坑暗坑,我們希望通過系列教程,減少大家在使用 Hooks 時(shí)的困惑,避免走彎路。
可以不用看的附錄
推薦之前的幾篇文章,可以幫助你對(duì) umi hooks/ahooks 有一個(gè)更深入的認(rèn)識(shí):
《React Hooks 在螞蟻金服的實(shí)踐[9]》 《Umi Hooks - 助力擁抱 React Hooks[10]》 《useRequest- 螞蟻中臺(tái)標(biāo)準(zhǔn)請(qǐng)求 Hooks[11]》 應(yīng)該很多人想問,為什么不直接用 react-use,而是要自己建設(shè) React Hooks 庫呢?
正如之前很多文章中說的,react-use 大版本升級(jí)太快了,實(shí)在跟不上。我第一次用的時(shí)候是 v9,上次寫文章的時(shí)候是 v13,現(xiàn)在是 v15。如果大面積使用起來,升級(jí)起來太麻煩了。 另外一點(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
[2]@umijs/hooks: https://github.com/umijs/hooks
[3]useRequest: https://ahooks.js.org/zh-CN/hooks/async
[4]內(nèi)置請(qǐng)求方案: https://umijs.org/plugins/plugin-request
[5]react-use: https://github.com/streamich/react-use
[6]https://github.com/alibaba/hooks: https://github.com/alibaba/hooks
[7]API 規(guī)范: https://ahooks.js.org/zh-CN/docs/api
[8]這里: https://ahooks.js.org/zh-CN/docs/umi-hooks-to-ahooks
[9]React Hooks 在螞蟻金服的實(shí)踐: https://zhuanlan.zhihu.com/p/94030173
[10]Umi Hooks - 助力擁抱 React Hooks: https://zhuanlan.zhihu.com/p/103150605
[11]useRequest- 螞蟻中臺(tái)標(biāo)準(zhǔn)請(qǐng)求 Hooks: https://zhuanlan.zhihu.com/p/106796295
