[TOC] > [home](https://swr.vercel.app/zh-CN) ## 概述 仅需一行代码，你就可以简化项目中数据请求的逻辑，并立即拥有以下这些不可思议的特性： * **极速**、**轻量**、**可重用的**数据请求 * 内置**缓存**和重复请求去除 * **实时**体验 * 传输和协议不可知 * 支持 SSR / ISR / SSG * 支持 TypeScript * React Native SWR 涵盖了性能，正确性和稳定性的各个方面，以帮你建立更好的体验： * 快速页面导航 * 间隔轮询 * 数据依赖 * 聚焦时重新验证 * 网络恢复时重新验证 * 本地缓存更新 (Optimistic UI) * 智能错误重试 * 分页和滚动位置恢复 * React Suspense ## 安装 ``` pnpm add swr ``` ## 语法 ``` const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher, options) ``` ## 示例 ### hello-world ``` import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } ``` ### 服用组件 子组件直接调用 ``` function Content() { const { user, isLoading } = useUser() if (isLoading) return <Spinner /> return <h1>Welcome back, {user.name}</h1> } function Avatar() { const { user, isLoading } = useUser() if (isLoading) return <Spinner /> return <img src={user.avatar} alt={user.name} /> } ``` > 只会有**1 个请求**发送到 API，因为它们使用相同的 SWR key，因此请求会被自动**去除重复**、**缓存**和**共享**