RTK Query强制重取时是否对比缓存与新数据并复用引用?
RTK Query refetch 数据无变化时的引用复用机制
你的判断完全正确:RTK Query确实会对比缓存数据与新获取的数据,若内容完全一致,则返回原有数据的引用,不会生成新的对象/数组引用。
这是RTK Query内置的性能优化手段,利用了Immer的结构共享(structural sharing)能力:
- 当你调用
refetch发起请求后,RTK Query会将服务器返回的新数据和缓存中的旧数据做深层对比 - 如果两者内容完全相同,就直接复用旧数据的引用,不创建新的对象/数组
- 只有当数据内容发生变化时,才会生成新的引用并更新缓存
对应你的场景:
- 首次挂载时,缓存为空,获取到数据后生成新引用,触发
useEffect - 调用
refetch但服务器返回相同数据时,RTK Query复用旧的teams引用,useEffect的依赖项没有变化,因此不执行 - 当数据真的更新时,生成新引用,
useEffect触发
如果需要在每次refetch完成时执行逻辑(不管数据是否变化),可以换两种方式实现:
- 监听查询的
status状态,从pending变为fulfilled时执行:
function MyComponent(props){ ... const { data: teams, refetch, status } = useGetUserTeamsQuery({userId}, {skip: !userId || !rolesToken}); useEffect(()=>{ if(status === 'fulfilled'){ console.log("refetch completed...") } }, [status]) }
- 在查询配置中使用
onSuccess回调:
function MyComponent(props){ ... const { data: teams, refetch, } = useGetUserTeamsQuery({userId}, { skip: !userId || !rolesToken, onSuccess: () => { console.log("query succeeded...") } }); }
内容的提问来源于stack exchange,提问作者abdou-tech
相关产品推荐
相关产品推荐

