SWR：最具潜力的 React Hooks 数据请求库

说明：本文内容主要来源于 SWR 的 官方文档 以及 GitHub zeit/swr 仓库，本篇主要为功能简介篇。

简介

React Hooks library for remote data fetching

SWR 出自社区知名的开源框架 Next.js 和 now.sh 的公司 zeit，一个用于请求远程数据的 React Hooks 库，仅发布三天时间在 GitHub 上即获得 2.5K 的 stars，最核心的功能只有一个 useSWR API， 用法也是非常的简单和直观，官网的快速开始示例如下：

import useSWR from 'swr'

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

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

上述示例是一个最基础的前端基础请求例子， useSWR 接受一个 key 和一个异步请求函数 fetch 作为参数。 key 是数据的唯一标识符，通常是 API URL，并且 fetch 接受 key 作为其参数，完成具体的数据请求行为并异步返回数据。

useSWR 返回 2 个值： data 和 error ， 分别对应请求返回的数据结果和错误，当 data 为空时，可以指定渲染对应的 UI；当请求（获取）尚未完成时，数据将是 undefined 的；当得到响应时它会根据获取的结果设置 data 和 error 然后重新渲染组件。其中第二个参数 fetch 部分可以是任何异步函数，因此可以使用你喜欢的任何数据获取库来处理这这部分。

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

SWR 来源自一个 RFC 5861 提案中的一个请求缓存策略：stale-while-revalidate，简单理解就是请求时预先返回一个不新鲜（stale）的缓存值，然后同时发出请求异步更新。这个策略是为了利用缓存加快数据的请求速度以及 UI 的体验，最大的优势是交互响应快，断网或者慢网环境下的的用户体验，请求的返回值也是同步的，但一定程度上牺牲了数据的新鲜性。

2010 年的时候，雅虎的工程师 Mark Nottingham 为 Cache-Control 响应应头制定了两个新的扩展指令tools.ietf.org/html/rfc ，其中一个就是 stale-while-revalidate

stale-while-revalidate最初是为缓存服务器设计的，已经在 HTTP Cache-Control 响应头中有了实验性的具体实现，目前已经在 Chrome 75 中默认开启，Chrome 同时还推动它进了 https://fetch.spec.whatwg.org/ 规范，接着 Firefox 也在 2019 年 4 月实现了。

引用原文：Cache-Control 的 stale-while-revalidate 指令

功能

SWR 相比常见的数据请求库提供了很多很酷且很有脑洞的特性，比如导航切换时使用缓存数据进行优先渲染然后在进行对比更新，数据在 focus 时更新，轮询检查更新，分页按需更新等等。

• Transport and protocol agnostic data fetching
• Fast page navigation
• Revalidation on focus
• Interval polling
• Local mutation
• Pagination
• TypeScript ready
• Suspense mode
• Minimal API

Focus Revalidation

当重新聚焦页面或在不同的标签页之间切换时，SWR 会自动重新获取数据，这对于立即同步到最新状态很有用。常见的场景如电脑进入睡眠状态的情况下，重新刷新数据是很有帮助的。

如下演示：使用焦点自动在页面之间同步登录状态。

##
Fast Navigation

当浏览页面或系统中的某个部分时，也或者当点击返回按钮时，SWR 将会加载缓存的数据，同时为了达到最终数据的一致性，一旦从缓存加载数据，SWR 会自动重新获取原始的数据。

如下演示：SWR 通过使用缓存数据使得页面显示得更快，然后用最新的数据更新缓存。

Refetch on Interval

在许多情况下，由于多个设备、多个用户、多个选项卡，数据会发生更改。随着时间的推移，我们如何更新屏幕上的数据？SWR 也提供了自动重新提取数据的选项，且只有与 hook 相关的组件在屏幕上时才会进行重新更新。

如下演示：当进行更改是，两个会话最终呈现相同的数据。

Local mutation

在许多情况下，对数据应用局部突变是一种让更改感觉更快的好方法—无需等待远程数据源。局部突变是一种完全可选的方法，用于设置临时的局部状态，该状态将在下次重新验证时自动更新。

SWR 提供了一个 mutate 方法来直接修改请求返回的数据，此时请求中的 key 就派上用场了。官方给的例子是用于乐观更新，提交表单时提前修改前端展现的数据，然后发请求进行 revalidate 更新。

Scroll Position Recovery and Pagination

SWR 内置支持数据以 块（chunks） 的形式返回数据的 APIs ，以及用于”加载更多”的相应 UI。此外，当导航回到“加载更多”的列表时，包括滚动位置在内的所有内容都将自动恢复。

如下：ZEIT 仪表板上的无限滚动用户界面，SWR 将恢复你的滚动位置。

Custom Data Fetching

SWR 默认用原生的 fetch 做请求，并假设使用 REST 风格的 API 进行调用，但是你也可以指定其他的任何异步请求库作为第二个参数，比如下面的例子是 graphql 示例：

import { request } from 'graphql-request'
import useSWR from 'swr'

const API = 'https://api.graph.cool/simple/v1/movies'

function Profile () {
  const { data, error } = useSWR(
    `{
      Movie(title: "Inception") {
        releaseDate
        actors {
          name
        }
      }
    }`,
    query => request(API, query)
  )

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>Movie: {data.title}!</div>
}

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

Dependent Fetching

SWR 允许获取依赖于其他数据的数据，它可以确保最大程度的并行性（avoiding waterfalls）。

import useSWR from 'swr'

function MyProjects () {
  const { data: user } = useSWR('/api/user')
  const { data: projects } = useSWR(
    () => '/api/projects?uid=' + user.id
  )
  // When passing a function, SWR will use the
  // return value as `key`. If the function throws,
  // SWR will know that some dependencies are not
  // ready. In this case it is `user`.

  if (!projects) return 'loading...'
  return 'You have ' + projects.length + ' projects'
}

Suspense

还可以将 SWR Hooks 与 React Suspense 一起使用，只需 SWR 的配置中启用 suspense: true ，一切都会顺利进行。

import { Suspense } from 'react'
import useSWR from 'swr'

function Profile () {
  const { data } = useSWR(
    '/api/user',
    fetch,
    { suspense: true }
  )
  return <div>hello, {data.name}</div>
}

function App () {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Profile/>
    </Suspense>
  )
}

总结

目前来看 SWR 主要是基于 stale-while-revalidate 概念，实现的一个 React Hooks 版本的数据请求库，可以从上面分析的功能发现其核心是专注在 异步数据请求 这个最基本的诉求上，同时带入了很多新的脑洞以及很多新思路，相比现有的请求库未来可能有更多的可能性，是具有较大潜力的请求类工具库。