react-query中staleTime和cacheTime

基本概念

• cacheTime 是 react-query 中缓存过期时间，过期后将从缓存中清除
• staleTime 缓存新鲜时间

用法

同样的queryKey， react-query 每次都会首先去缓存里面读数据

一、如果缓存里面有数据，都直接返回缓存数据先给页面用

1. 同时如果在staleTime 时间内，认为缓存不需要更新，连请求都不会发送
2. 如果不在staleTime时间内，会认为缓存不再新鲜，仍然会先返回缓存数据，再发送请求去更新缓存数据

二、如果缓存里面没有数据，发送请求返回数据

什么时候缓存没有数据

1. 之前没有请求过，自然也就没有缓存；
2. 之前请求过数据，但是数据已经过了cacheTime 缓存被清除掉了

举例

以下假设是同样的queryKey

举例1

staleTime: 3000 cacheTime: 5000

1. 第一次 时间T，页面显示空白数据，发送请求，获得数据D，页面显示数据D，react-query缓存数据D
2. 时间 T + 2000 ，cacheTime 有效，直接返回缓存数据D，并且在 staleTime内不会发送请求
3. 时间 T + 4000, 缓存D仍在，页面显示缓存D，staleTime过期，发送请求，获得数据D1，react-query缓存数据D1
4. 时间 T+ 5000, 缓存D1仍在，页面显示缓存D1，并且在 staleTime内不会发送请求

举例2

staleTime: 5000 cacheTime: 3000

1. 第一次 时间T，页面显示空白数据，发送请求，获得数据D，页面显示数据D，react-query缓存数据D
2. 时间 T + 2000 ，cacheTime 有效，直接返回缓存数据D，并且在 staleTime内不会发送请求
3. 时间 T+ 4000, cache 过期无，页面显示无数据，发送请求，获得数据D1，页面显示数据D1，react-query缓存数据D1