用途:该技能整理 React 中 SWR 的数据获取模式,覆盖缓存键与 fetcher、状态区分、重验证策略、写入、乐观更新、分页与条件请求。
主要能力:读用 useSWR(挂载时获取并保持数据新鲜);写用 useSWRMutation(调用 trigger() 前不执行);列表累积用 useSWRInfinite,其 getKey(pageIndex, previousPage) 生成每页键并以返回 null 结束;suspense: true 让组件挂起且数据非空。文档还涉及 SWRConfig 全局配置、mutate、preload、缓存持久化与错误重试。
使用方式:键须跨渲染稳定(字符串或基本类型数组),不能是每次渲染新建的对象或数组字面量,否则会反复重新获取。fetcher 在非 OK 响应时必须抛出错误,否则错误体被当作数据、error 分支不执行。用 isLoading 判断首次获取(无数据时才为真,适合骨架屏),用 isValidating 判断后台重验证(此时屏幕上已有数据)。写入一律用 useSWRMutation,因为 useSWR 在挂载时即触发。条件请求用 null 键跳过而不破坏 Hook 规则。乐观更新可配 optimisticData、rollbackOnError、populateCache。
适用场景:缓存键与 fetcher 设计、聚焦/重连/轮询/静态等重验证策略、写与缓存失效、游标或偏移分页、条件与依赖请求、重试策略及服务端渲染数据注水。
限制与注意:null 会跳过请求,undefined 不会,会请求到 /api/users/undefined;keepPreviousData 在搜索框中会显示上一次查询结果;fallback 键需精确匹配;revalidateAll 会重取所有已加载页;默认重试不区分失败类型,可能重试 404 与 401;错误对象不能 JSON 序列化,持久化缓存需结构化错误;无内置请求取消机制,不想要的响应被丢弃而非中止,需要真正中止时 fetcher 需自带 AbortController。客户端状态与传输层不属本技能范围。