[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，因此請求會被自動**去除重復**、**緩存**和**共享**