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

说明：本文由飞冰的思忠撰写，内容主要来源于 SWR 的官方文档[1]以及 GitHub zeit/swr[2] 仓库，本篇主要为功能简介篇。可以点击阅读原文，关注飞冰的知乎。

简介

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^[3]. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

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

2010 年的时候，雅虎的工程师 Mark Nottingham 为 Cache-Control 响应头制定了两个新的扩展指令 tools.ietf.org/html/rfc^[4] ，其中一个就是 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 指令^[5]

功能

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^[6] 仪表板上的无限滚动用户界面，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>
}

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 版本的数据请求库，可以从上面分析的功能发现其核心是专注在 异步数据请求 这个最基本的诉求上，同时带入了很多新的脑洞以及很多新思路，相比现有的请求库未来可能有更多的可能性，是具有较大潜力的请求类工具库。

参考资料