Skip to content

SWR

用于请求数据的 React Hooks 库

轻量的

后端不可知的

实时的

面向 Jamstack 的

TypeScript Ready

远程 + 本地

“SWR” 这个名字来自于 stale-while-revalidate。一种由 HTTP RFC 5861 推广的 HTTP 缓存失效策略。SWR 是一种策略,它首先从缓存中返回数据(过期的),然后发送 fetch 请求(重新验证),最后得到最新数据。

使用 SWR,组件将不断的自动获得数据更新流。
UI 也总是快速响应

Overview(概览)

import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}

该示例中中,useSWR hook 接受一个字符串 key 和一个函数 fetcherkey 是数据的唯一标识符(通常是 API URL),并传递给 fetcherfetcher 可以是任何返回数据的异步函数,你可以使用原生的 fetch 或 Axios 之类的工具。

基于请求的状态,这个 hook 返回 2 个值:dataerror

Features(特性)

仅需一行代码,你就可以简化项目中数据请求的逻辑,并立即拥有以下这些不可思议的特性:

  • 面向 Jamstack
  • 极速轻量可重用的数据请求
  • 内置缓存和重复数据删除请求
  • 实时体验
  • 传输和协议不可知
  • TypeScript ready
  • React Native

SWR 涵盖了速度,正确性和稳定性的各个方面,以帮你建立更好的体验:

  • 快速页面导航
  • 间隔轮询
  • 数据依赖
  • 聚焦时重新验证
  • 网络恢复时重新验证
  • 本地更改 (Optimistic UI)
  • 智能错误重试
  • 分页和滚动位置恢复
  • React Suspense
  • ...

Community(社区)

starsdownloadslicense

SWR 由 Next.js(React 框架)背后的同一团队创建。
在 Twitter 上关注 @vercel 未来项目更新

欢迎加入 GitHub 上的讨论