SWR 用于数据请求的 React Hooks 库

SWR

用于数据请求的 React Hooks 库

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

使用 SWR，组件将会不断地、自动获得最新数据流。
UI 也会一直保持快速响应。

概览：

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return 
failed to load
  if (!data) return 
loading...
  return 
hello {data.name}!
}

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

基于请求的状态，这个 hook 返回 2 个值：data 和 error。

特性：

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

面向 Jamstack
极速、轻量、可重用的 数据请求
内置 缓存 和重复请求去除
实时 体验
传输和协议不可知
TypeScript ready
React Native
SWR 涵盖了性能，正确性和稳定性的各个方面，以帮你建立更好的体验：

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

文档地址：SWR文档