16

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

 4 years ago
source link: http://mp.weixin.qq.com/s?__biz=MzIxNTIzNjkyOA%3D%3D&%3Bmid=2650444705&%3Bidx=1&%3Bsn=958a6c69aa5b61c8c2b9e128396cbb4a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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]

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

[7]

API 规范: https://ahooks.js.org/zh-CN/docs/api

[8]

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

[9]

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

[10]

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

[11]

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

zY7nEfy.jpg!web

前端技术砖家

关注公众号加交流群

在看点这里

uEJ3IfM.gif

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK