ahooks 3.0 来了！高质量可靠的 React Hooks 库

↓推荐关注↓

ahooks^[1] 是一套开源的 React Hooks 库，封装了大量好用的 Hooks。在当前 React 项目研发过程中，一套好用的 React Hooks 库是必不可少的，希望 ahooks 能成为您的选择。

自 2019 年 8 月 ahooks（umi hooks）发布第一个版本，到今天已经历经了 2 年的发展，在国内外社区也获得了很多同学的认可。目前 ahooks 2.0 的成绩主要包括：

• 在阿里内部覆盖了上千个前端应用
• 开发了 60+ Hooks
• npm & tnpm 周下载量 7w+
• GitHub star 7.4k

在这两年的发展过程中，随着对 React Hooks 的理解越来越深入，我们能看到 ahooks 2.0 设计中的很多不足。在这个背景下，我们决定开发 3.0 版本。

ahooks 3.0 的目标是建设 高质量可靠的 React Hooks 库，我们希望成为像 lodash 一样的稳定的基础依赖。相较于 2.0，具有以下几个优势：

• 全面支持 SSR
• 全新的 useRequest
• 所有的输出函数地址是固定的，避免闭包问题
• DOM 类 Hooks 支持 target 动态变化
• 更合理的 API 设计
• 解决了在严格模式（Strict Mode）下的问题
• 解决了在 react-refresh（HRM）模式下的问题
• 新增了更多 Hooks
• 修复了很多已知问题

全面支持 SSR

React Hooks 在 SSR 场景下，普遍会碰到“DOM/BOM 缺失”、“useLayoutEffect 警告”两个问题。ahooks v3.0 彻底解决了这两个问题，你可以安心的将 ahooks 使用到 SSR 场景了。

更多内容可以参考《React Hooks & SSR^[2]》

全新的 useRequest

useRequest 是 ahooks 使用量最高的 Hook，同时也是 issue 量最多的 Hook。总结 useRequest 之前最大的问题是：

• 代码拆分不合理，所有的功能混合在一个文件中，改动起来非常复杂
• 部分功能上线前没有充分论证，导致功能设计不合理，但是也下不掉
• 融合了 pagination 和 loadMore 的逻辑，导致 ts 类型复杂到难以想象

ahooks v3.0 版本对 useRequest 进行了完全重写：

• 通过插件式组织代码，核心代码极其简单，所有高级功能均是通过插件实现
• 仔细论证了提供的所有的能力，保证上线的特性均是最优解。对存疑的能力，渐进添加
• 所有的参数支持动态变化
• 删除了 pagination 和 loadMore 逻辑，单独拆分出其它 Hooks 提供相应能力
• 避免了 ts 类型重载，可以更方面的基于 useRequest 封装更高级的 Hooks
• 修复了大量遗留问题

更多内容可以参考《全新的 useRequest^[3]》

函数特殊处理，避免闭包问题

ahooks v3 通过对输入输出函数做特殊处理，尽力帮助大家避免闭包问题。这个能力我觉得是 ahooks 做的比较激进的地方，但确实能对用户提供非常好的使用体验。

1. ahooks 所有的输出函数，地址都是不会变化的

const [state, setState] = React.useState();

众所周知，React.useState 返回的 setState 函数地址是固定的，使用时不需要考虑奇奇怪怪的问题，不需要把  setState 放到各种依赖中。ahooks v3.0 所有 Hooks 返回的函数，都拥有和 setState 一样的特性，地址不会变化，放心大胆的使用即可。

1. 所有用户输入的函数，永远使用最新的一份

对于接收的函数，ahooks v3 会做一次特殊处理，保证每次调用的函数永远是最新的。

const [state, setState] = useState();

useInterval(() => {
  console.log(state);
}, 1000);

比如以上示例，useInterval 任何时候调用的函数永远是最新的，也就是 state 永远是最新的。

更多内容可以参考《ahooks 输入输出函数处理规范^[4]》

更多问题修复

• DOM 类 Hooks 支持 target 动态变化，相关文档可见《DOM 类 Hooks 使用规范^[5]》
• v3 修复了在严格模式下的一些问题。参考《React Hooks & strict mode^[6]》
• v3 修复了在 react-refresh（HRM）模式下的一些问题。参考《React Hooks & react-refresh（HMR）^[7]》

更多改动参考《v2 to v3^[8]》

结尾

ahooks v3.0 的 slogan 是“高质量可靠的 React Hooks 库”，这是我们为之奋斗的目标，希望 ahooks 成为每一位开发者的必备基础库之一。

感谢 ahooks 的共建者和使用者！欢迎试用 v3.0！

$ npm install --save ahooks@next
# or
$ yarn add ahooks@next

• 文档：https://ahooks.js.org/zh-CN^[9]
• 源码：https://github.com/alibaba/hooks^[10]

参考资料

[1]

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

[2]

React Hooks & SSR: https://ahooks.js.org/zh-CN/guide/blog/ssr/

[3]

全新的 useRequest: https://ahooks.js.org/zh-CN/guide/upgrade#%E5%85%A8%E6%96%B0%E7%9A%84-userequest

[4]

ahooks 输入输出函数处理规范: https://ahooks.js.org/zh-CN/guide/blog/function

[5]

DOM 类 Hooks 使用规范: https://ahooks.js.org/zh-CN/guide/dom

[6]

React Hooks & strict mode: https://ahooks.js.org/zh-CN/guide/blog/strict

[7]

React Hooks & react-refresh（HMR）: https://ahooks.js.org/zh-CN/guide/blog/hmr

[8]

v2 to v3: https://ahooks.js.org/zh-CN/guide/upgrade

[9]

https://ahooks.js.org/zh-CN: https://ahooks.js.org/zh-CN

[10]

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

- EOF -

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️