# SWR 最佳实践您是 SWR（stale-while-revalidate）、TypeScript 和 React 开发方面的专家。 SWR 是一个用于数据获取的 React Hooks 库，它首先从缓存返回数据（陈旧），然后发送请求（重新验证），最后提供最新数据。 ## 核心原则 * 使用SWR进行所有客户端数据获取 * 利用自动缓存和重新验证 * 利用 SWR 的内置状态管理最大限度地减少样板代码 * 实施正确的错误处理和加载状态 * 使用 TypeScript 实现完整的类型安全 ## 主要特点 * **Stale-While-Revalidate** ：立即返回缓存数据，然后在后台重新验证 * **自动重新验证**：安装、窗口焦点和网络重新连接时 * **请求重复数据删除** ：使用相同密钥的多个组件共享一个请求 * **内置缓存**：具有智能失效功能的零配置缓存 * **最小 API** ：简单的基于钩子的界面 ## 项目结构源代码/ 钩子/ 驻波比/ useUser.ts usePosts.ts useProducts.ts 库/ fetcher.ts # 全局 fetcher 配置提供商/ SWRProvider.tsx # SWR 配置提供程序类型/ api.ts # API 响应类型 ## 设置和配置 ### 全局配置 // 提供商/SWRProvider.tsx 从 'swr' 导入 { SWRConfig }； const fetcher = async (url: string) => { const res = 等待 fetch(url); 如果（！res.ok）{ const error = new Error('获取数据时发生错误。'); 抛出错误； } 返回 res.json(); }; 导出函数 SWRProvider({ 孩子 }: { 孩子: React.ReactNode }) { 返回（ {孩子} ）； } ### 自定义获取器 // lib/fetcher.ts 导出异步函数 fetcher(url: string): Promise { const 响应 = 等待获取（url，{ 标题：{ '内容类型'：'应用程序/json'， }, }); 如果（！response.ok）{ throw new Error(`HTTP 错误！状态：${response.status}`); } 返回response.json(); } // 带有身份验证导出异步函数 authFetcher(url: string): Promise { const token = getAuthToken(); const 响应 = 等待获取（url，{ 标题：{ '内容类型'：'应用程序/json'， '授权': `不记名${token}`, }, }); 如果（！response.ok）{ throw new Error(`HTTP 错误！状态：${response.status}`); } 返回response.json(); } ## 基本用法 ### useSWR 钩子 `useSWR` 钩子接受三个参数： * **key** ：请求的唯一字符串标识符（如 URL） * **fetcher** ：获取数据的异步函数 * **选项**：配置选项从 'swr' 导入 useSWR；界面用户{ id：字符串；名称：字符串；电子邮件：字符串； } 函数 useUser(userId: 字符串) { const { 数据、错误、isLoading、isValidating、mutate } = useSWR<用户>( 用户 ID ? `/api/users/${userId}` ：空，获取器）；返回{ 用户：数据，正在加载，错误：！！错误，正在验证，变异， }; } ### 条件获取传递“null”或一个虚假值作为键来有条件地跳过获取： // 仅当 userId 可用时才获取 const { data } = useSWR(userId ? `/api/users/${userId}` : null, fetcher); // 使用动态键函数 const { data } = useSWR(() => `/api/users/${userId}`, fetcher); ## 重新验证策略 ### 自动重新验证 SWR 在三种情况下自动重新验证数据： 1. 组件已安装（即使有缓存数据） 2. 窗口获得焦点 3. 浏览器恢复网络连接 // 禁用特定的重新验证行为 const { 数据 } = useSWR('/api/data', fetcher, { 重新验证焦点：假，重新验证重新连接：假， revalidateOnMount：真， }); ### 手动重新验证从 'swr' 导入 { useSWRConfig }；函数更新按钮() { const { 变异 } = useSWRConfig(); const handleUpdate = async () => { // 重新验证特定密钥等待变异（'/ api / users'）； // 重新验证与过滤器匹配的所有键等待变异（ (key) => typeof key === 'string' && key.startsWith('/api/users'), 未定义， { 重新验证：真 } ）； }; return ; } ### 轮询/间隔刷新 // 每3秒刷新一次 const { 数据 } = useSWR('/api/realtime', fetcher, { 刷新间隔：3000， }); // 条件轮询 const { 数据 } = useSWR('/api/realtime', fetcher, { 刷新间隔：是否可见？ 1000：0， }); ## 突变模式 ### 乐观更新从 'swr' 导入 useSWR, { useSWRConfig }; 函数 useUpdateUser() { const { 变异 } = useSWRConfig(); const updateUser = async (userId: string, newData: Partial) => { // 乐观更新等待变异（ `/api/users/${userId}`, 异步（当前数据：用户|未定义）=> { // 更新API const 更新 = 等待 fetch(`/api/users/${userId}`, { 方法：'补丁'，正文：JSON.stringify（newData）， }).then(r => r.json()); 返回更新； }, { 乐观数据：（当前）=>（{...当前，...newData}作为用户），回滚错误：true，填充缓存：真，重新验证：假， } ）； }; 返回 { 更新用户 }; } ### 绑定变异函数 UserProfile({ userId }: { userId: string }) { const { data: user, mutate } = useSWR(`/api/users/${userId}`, fetcher); const handleUpdate = async (newName: string) => { // 立即更新本地数据 mutate({ ...用户, 名称: newName }, false); // 发送更新到服务器等待 updateUserName(userId, newName); // 重新验证以确保一致性变异（）； }; 返回（

{用户？.名称}

）； } ## 分页 ### 基本分页函数 usePaginatedUsers(页数: 数量) { 返回 useSWR(`/api/users?page=${page}`, fetcher, { 保留以前的数据：true， }); } ### 使用 useSWRInfinite 无限加载从 'swr/infinite' 导入 useSWRInfinite；函数 useInfiniteUsers() { const getKey = (pageIndex: number, previousPageData: User[] | null) => { // 返回 null 停止获取 if (previousPageData && previousPageData.length === 0) 返回 null; // 下一页的返回键返回 `/api/users?page=${pageIndex + 1}`; }; const { 数据、错误、大小、setSize、isValidating } = useSWRInfinite( 获取密钥，获取器）；常量用户=数据？ data.flat() : []; const isLoadingMore = size > 0 && data && typeof data[size - 1] === '未定义'; const isEmpty = data?.[0]?.length === 0; const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < 10); 返回{ 用户，正在加载更多, 正在到达终点， loadMore: () => setSize(大小 + 1), }; } ### 基于光标的分页从 'swr/infinite' 导入 useSWRInfinite；函数 useCursorPagination() { const getKey = (pageIndex: number, previousPageData: any) => { if (previousPageData && !previousPageData.nextCursor) 返回 null; if (pageIndex === 0) return '/api/items'; 返回 `/api/items?cursor=${previousPageData.nextCursor}`; }; 返回 useSWRInfinite(getKey, fetcher); } ## 错误处理 ### 组件级错误处理函数 UserProfile({ userId }: { userId: string }) { const { data, error, isLoading } = useSWR(`/api/users/${userId}`, fetcher); if (isLoading) 返回 ; 如果（错误）{ 返回（ <错误信息 message="无法加载用户配置文件" 重试={() => mutate(`/api/users/${userId}`)} /> ）； } 返回 ; } ### 全局错误处理程序 { if (错误.状态!== 403 && 错误.状态!== 404) { // 向跟踪服务发送错误报告错误（错误，关键）； } }, }} > <应用程序/> ## 预取从'swr'导入{预加载}； // 在组件渲染之前预取数据函数 prefetchUser(userId: string) { 预加载(`/api/users/${userId}`, fetcher); } // 用法：悬停或路线改变时调用函数 UserLink({ userId }: { userId: string }) { 返回（ <链接到={`/users/${userId}`} onMouseEnter={() => prefetchUser(userId)} > 查看资料）； } ## 关键约定 1. 使用SWR以最少的配置进行客户端数据获取 2. 实现加载状态和错误消息的条件渲染 3. 验证数据以确保预期的格式并妥善处理错误 4. 在用户请求数据之前使用预取来提高性能 5. 利用自动重新验证实现实时数据新鲜度 6. 使用 `useSWRInfinite` 进行分页和无限滚动模式 ## 与 Next.js 集成 // 对于服务器端数据，使用 getServerSideProps 或 getStaticProps // 对于客户端缓存和重新验证，请使用 SWR // 页面/用户/[id].tsx 导出异步函数 getStaticProps({ params }) { const user = wait fetchUser(params.id); 返回 { 道具：{ 后备：{ [`/api/users/${params.id}`]：用户 } } }; } 导出默认函数 UserPage({ Fallback }) { 返回（ <用户资料/> ）； } ## 要避免的反模式 * 当SWR可以处理时，不要使用`useEffect`来获取数据 * 不要忽略错误状态 - 始终提供用户反馈 * 不要忘记适当地处理加载状态 * 当 WebSocket 或 SSE 更高效时不要使用轮询 * 不要跳过依赖数据的条件获取 * 不要忽略获取数据的 TypeScript 类型

驻波比

包含技能