react & vue & angular

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

2022-04-08  本文已影响0人  涅槃快乐是金

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

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

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

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

全面支持 SSR

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

更多内容可以参考《React Hooks & SSR

全新的 useRequest

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

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

更多内容可以参考《全新的 useRequest

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

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

  1. ahooks 所有的输出函数,引用地址都是不会变化的
const [state, setState] = React.useState();

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

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

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

const [state, setState] = useState();

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

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

更多内容可以参考《ahooks 输入输出函数处理规范

更多问题修复

更多改动参考《v2 to v3

结尾

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

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

$ npm install --save ahooks@next
# or
$ yarn add ahooks@next
上一篇下一篇

猜你喜欢

热点阅读