可能是你见过最好的 React Hooks 库

短命女 2022-12-09 04:59 261阅读 0赞

ahooks\[1\] 是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。ahooks 基于 React Hooks 的逻辑封装能力，提供了大量常见好用的 Hooks，可以极大降低代码复杂度，提升开发效率。

ahooks 致力成为和 antd/fusion 一样的 React 基础设施，帮助开发者在逻辑层面省去大量的重复工作。

## ahooks 前身 ##

ahooks 的前身是蚂蚁开源的 @umijs/hooks\[2\]，可以说 ahooks 是 umi hooks 的 2.0 版本。  
umi hooks 从 2019年9月 发布 v1.0 之后，一路前行，得到了不少用户的青睐。截至当前，umi hooks 在社区收获了 2.2k star，npm 周下载量最高 7000+，tnpm 周下载量 8000+。  
同时在蚂蚁内部，umi hooks 也已经成为标准 React Hooks 库，截至当前，能统计到的项目中有 600+ 项目依赖了 umi hooks。并且 useRequest\[3\] 也已经成为 umi3 内置请求方案\[4\]。  
但 umi hooks 半年来的野蛮生长，也带来了一些副作用。

*  部分 Hooks 设计不合理，后期进行了部分 Hooks 合并，废弃了一些 Hooks。
 *  没有制定 API 标准，导致已有 Hooks 的 API 格式与命名不统一。

我们希望有个机会能彻底解决这两个心病。

## 共建 ##

随着 React Hooks 的发展，各个团队都开始尝试使用 Hooks 代替 Class，Hooks 正逐渐成为 React 组件的主流写法。得益于 Hooks 的逻辑封装能力，我们可以将常见的逻辑封装起来，以减少代码复杂度。或者使用社区上别人封装的 Hooks，比如 react-use\[5\] 等。  
当然出于种种原因，很多团队希望建设自己的 Hooks 库。但在建设过程中，能发现各个 Hooks 库提供的 Hooks 大同小异，尤其是基础类 Hooks 几乎都是一样的。  
基于避免重复建设的目的，以及 umi hooks 的积累，我们与集团 ice 团队，阿里体育团队一拍即合，决定基于 umi hooks 共同建设 React Hooks 工具库，ahooks 随即诞生。

## 现状 ##

经过一个半月的改造，ahooks 已经发布了 v1.0 版本，并开源在 https://github.com/alibaba/hooks\[6\] 仓库，你可以放心的在生产环境使用。  
ahooks 相较于 umi hooks，有了自己的 API 规范\[7\]，我们基于这套规范，重新整理了所有 Hooks 的 API，你可以在这里\[8\]找到升级详情。  
在 ahooks 的开发过程中，集团内也有其它很多部门参与进来，出谋划策，感谢大家。

## 规划 ##

如前面所说，ahooks 致力成为向 antd/fusion 一样的 React 基础设施。为了达到这个目标，我们正在全力开发更多的 Hooks，同时我们也期望大家能将日常封装的 Hooks 贡献到 ahooks 中，一起来帮助 ahooks 成长。

*  你可以提交一个 RFC，我们会帮你评估 Hooks 的必要性及 API 的规范。
 *  你也可以提交一个 idea，我们帮你实现。

除了 Hooks 库，我们也在准备 React Hooks 系列教程。不得不承认，虽然 React Hooks 很好用，但其中确实有有不少的明坑暗坑，我们希望通过系列教程，减少大家在使用 Hooks 时的困惑，避免走弯路。

## 可以不用看的附录 ##

*  推荐之前的几篇文章，可以帮助你对 umi hooks/ahooks 有一个更深入的认识：
 *   *  《React Hooks 在蚂蚁金服的实践\[9\]》
     *  《Umi Hooks - 助力拥抱 React Hooks\[10\]》
     *  《useRequest- 蚂蚁中台标准请求 Hooks\[11\]》
 *  应该很多人想问，为什么不直接用 react-use，而是要自己建设 React Hooks 库呢？
 *   *  正如之前很多文章中说的，react-use 大版本升级太快了，实在跟不上。我第一次用的时候是 v9，上次写文章的时候是 v13，现在是 v15。如果大面积使用起来，升级起来太麻烦了。
     *  另外一点就是 react-use 的 API 设计也是没有规范的，同类 Hooks 的 API 各种各样。
     *  当然不可否认的是，react-use 是社区最流行的 Hooks 库，为 ahooks 提供了很多灵感。

### Reference ###

\[1\]

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\]

内置请求方案: https://umijs.org/plugins/plugin-request

\[5\]

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

\[6\]