SWR库通过“先展示旧数据、再后台刷新”提升体验，useSWR自动管理data/loading/error状态，支持revalidateOnFocus、dedupingInterval等配置优化缓存，并提供mutate强制刷新等能力。
直接用 SWR 库是最简单可靠的方式，核心就是“先展示旧数据，再后台刷新”——不用等请求完成，界面不卡、不白屏、体验更顺滑。
用 useSWR 快速搭起带缓存的数据组件
安装后一行 hook 就能接管整个异步流程：
- 安装：
npm install swr - 写个通用 fetcher（比如封装 fetch 或 axios）
- 在组件里调用：
useSWR('/api/user', fetcher) - 它自动返回 data（缓存或新数据）、isLoading（是否首次加载中）、error（请求失败）三个状态
不需要手动 useState + useEffect 管理 loading/error/data 切换，也不用写重复的请求取消逻辑。
让缓存更贴合业务场景
默认缓存行为适合多数情况，但关键接口建议按需微调：
- 用户资料类高频更新数据：开启
revalidateOnFocus: true，切回页面时自动刷新 - 配置类静态数据：设
dedupingInterval: 86400000（24 小时），避免反复请求 - 首屏急需渲染：传
fallbackData，比如从 localStorage 读取上次缓存，跳过 loading 状态 - 弱网或关键操作：加
shouldRetryOnError: true和自定义重试次数
避免常见缓存陷阱
缓存好用，但容易因配置不当导致数据陈旧或重复拉取：
- 多个组件用相同 key 请求同一接口，SWR 自动去重合并请求——这是优势，不是 bug
- 如果希望某次请求强制跳过缓存（比如下拉刷新），可调用
mutate(key, undefined, { revalidate: true }) - 服务端返回 304 或带
Cache-Control头时，注意与 SWR 的staleTime配合，别让两层缓存互相干扰 - 敏感数据（如登录态）建议配合
refreshWhenOffline: false，离线时不尝试刷新
进阶：轻量模拟 SWR 核心逻辑（非必须）
如果暂时不能引入库，可用闭包+Map 手写简易缓存层：
- 用 Map 存 key → { data, timestamp, promise }
- 请求前先查缓存，若未过期且有值就直接返回
- 同时发起新请求，成功后更新缓存并通知所有监听者（可用 useRef + setState 触发重渲染）
- 重点不是复刻全部功能，而是守住“先返旧、再更新”这个体验底线
不过生产环境仍推荐直接用 swr 或 TanStack Query——它们已覆盖边界 case、竞态处理、Suspense 集成等细节，省心又稳定。
