ahooks——一个好用的hooks组件库

Posted on Edited on

ahooks简介

ahooks是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。
它正致力成为和 antd/fusion 一样的 React 基础设施，帮助开发者在逻辑层面省去大量的重复工作。

核心useRequest的基础用法

默认请求

1
const { data, error, loading } = useRequest(service);

第一个参数是一个异步函数，在组件初始化时，会自动执行该异步函数。同时自动管理该异步函数的 loading , data , error 等状态。

手动触发

1
2
3
4
5
6
7
const { loading, run, runAsync } = useRequest(service, {
    manual: true
});

<button onClick={run} disabled={loading}>
    {loading ? 'Loading' : 'Edit'}
</button>

设置了 options.manual = true，则 useRequest 不会默认执行，需要通过 run 或者 runAsync 来触发执行。

Q:run 与 runAsync 的区别

生命周期
在异步函数的不同阶段做一些处理


  • onBefore：请求之前触发

  • onSuccess：请求成功触发

  • onError：请求失败触发

  • onFinally：请求完成触发

刷新
使用refresh代替run
refresh 与 refreshAsync 的区别与run一致

立即变更数据
mutate支持立即修改返回的数据，用法与setState一致

取消响应
cancel函数用于忽略当前promise返回的数据和错误
注意：调用cancel函数并不会取消promise的执行

useRequest的具体应用

1、Loading Delay

1
2
3
4
5
const { loading, data } = useRequest(getUsername, {
    loadingDelay: 300
});

return <div>{ loading ? 'Loading...' : data }</div>

若在300ms内展示，则不显示loading···

2、轮询

1
2
3
const { data, run, cancel } = useRequest(getUsername, {
    pollingInterval: 3000,
});

每隔3000ms自动请求一次getUsername
可通过cancel停止、run启动

3、ready

1
2
3
4
5
6
const [ready, { toggle }] = useToggle(false);

const { data, loading } = useRequest(getUsername, {
    ready,
    //manual: true 手动模式
});

只有当ready为 true 时，才会执行

4、依赖刷新

1
2
3
4
5
const [userId, setUserId] = useState('1');

const { data, run } = useRequest(() => getUserSchool(userId), {
    refreshDeps: [userId],
});

1
2
3
4
5
const { data, refresh } = useRequest(() => getUserSchool(userId));

useEffect(() => {
    refresh();
}, [userId]);

切换userId后立即刷新

5、屏幕聚焦重新请求

1
2
3
const { data } = useRequest(getUsername, {
    refreshOnWindowFocus: true,
});

再次进入当前页面，如果和上一次请求间隔大于 5000ms 则会重新请求一次

6、防抖

1
2
3
4
const { data, run } = useRequest(getUsername, {
    debounceWait: 300,
    manual: true
});

频繁触发run，只会在最后一次触发结束后等待 300ms 执行。

7、节流

1
2
3
4
const { data, run } = useRequest(getUsername, {
    throttleWait: 300,
    manual: true
});

频繁触发run，只会每隔 300ms 执行一次。

8、缓存
cacheKey：将当前请求成功的数据缓存起来。
staleTime： 设置数据保持新鲜时间，在该时间内不会重新发起请求。
cacheTime： 设置数据缓存时间，超过该时间自动清空该条缓存数据。