alibaba / hooks

A high-quality & reliable React Hooks library. https://ahooks.pages.dev/
https://ahooks.js.org/
MIT License
13.98k stars 2.71k forks source link

[useRequest] 配置 cacheKey 后,如果同时触发的请求数过多,导致页面渲染卡死 #2031

Open HuColin opened 1 year ago

HuColin commented 1 year ago

复现 DemoITEM_COUNT1000 修改至 5000 再 修改至 10000 可以看到组件退出 loading 状态的时间显著增长

HuColin commented 1 year ago

问题背景

组件在渲染前需要根据传入的参数读取不同的远程配置来决定组件最终的渲染效果,因此在组件渲染时异步获取远程配置。但是组件在页面的列表中被渲染,为了减少获取配置的请求数量,使用了 useRequest 的缓存能力,对于相同参数对应的远程配置就无须重复获取了。请求放在组件中是为了,组件在其他地方复用时,使用方不需要感知配置获取的逻辑。

当前实现

Demo

存在问题

在接口请求完成后,页面渲染会有较长时间的卡顿,期间页面交互处于完全不可用的状态(点击输入框没有响应,或是无法响应用户输入),增大 IETM_COUNT 后效果愈发明显

HuColin commented 1 year ago

自己用类似的写法实现相同的功能,页面流畅性会好一些

Promise Demo

chj-damon commented 1 year ago

@HuColin 搞个PR上去?

komaedaXnagito commented 8 months ago

这个考虑合并吗?同样遇到性能问题

komaedaXnagito commented 8 months ago

测试发现组件渲染次数会增加使用了同一cacheKey的组件次数 复现demo https://riddle.alibaba-inc.com/riddles/65a081c1