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

点击上方“前端技术砖家”关注 

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

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

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

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

内置请求方案: 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 规范: https://ahooks.js.org/zh-CN/docs/api

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

React Hooks 在蚂蚁金服的实践: https://zhuanlan.zhihu.com/p/94030173

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

useRequest- 蚂蚁中台标准请求 Hooks: https://zhuanlan.zhihu.com/p/106796295

推荐阅读