Skip to content
文档
高级
缓存

缓存

💡

升级到最新版本(≥ 1.0.0)来使用该功能。

⚠️

在大多数情况下,你不应该直接写入缓存,这可能会导致 SWR 不可预知的行为。如果你需要手动操作一个 key,请考虑使用 SWR API。
参见:数据更改重置测试用例之间的缓存

默认情况下,SWR 使用全局缓存在所有组件之间存储和共享数据。但你也可以通过 SWRConfigprovider 选项来自定义这个行为。

缓存 provider 旨在通过更多自定义存储启用 SWR。

缓存 Provider

缓存 provider 是类似 Map 的对象,它匹配以下 TypeScript 定义(可以从 swr 导入):

interface Cache<Data> {
  get(key: string): Data | undefined
  set(key: string, value: Data): void
  delete(key: string): void
}

例如,一个 JavaScript Map 实例可以直接用作 SWR 的缓存 provider。

创建缓存 Provider

SWRConfigprovider 选项接收一个返回缓存 provider 的函数。该 provider 将被 SWRConfig 范围内的所有 SWR hook 使用。例如:

import useSWR, { SWRConfig } from 'swr'

function App() {
  return (
    <SWRConfig value={{ provider: () => new Map() }}>
      <Page/>
    </SWRConfig>
  )
}

<Page/> 中的所有 SWR hook 都将从该 Map 实例读取和写入。你还可以针对你的特定用例使用其他缓存 provider 实现。

💡

在上面的例子中,当 <App/> 组件重新挂载时,provider 也会被重新创建。缓存 provider 应该放在组件树的更高位置,或者放在渲染之外。

当嵌套时,SWR hook 将使用上层缓存 provider。如果没有上层缓存 provider,则回退到默认 provider,即一个空 Map

⚠️

如果使用了缓存 provider,则全局 mutate适用于 <SWRConfig> 范围内的 SWR hook。请使用访问当前缓存 Provider 代替。

访问当前缓存 Provider

在 React 组件内部,你需要使用 useSWRConfig hook 来访问当前缓存 provider 以及其他配置,包括 mutate

import { useSWRConfig } from 'swr'

function Avatar() {
  const { cache, mutate, ...extraConfig } = useSWRConfig()
  // ...
}

如果不在任何 <SWRConfig> 中,将返回默认配置。

实验性:扩展缓存 provider

🧪

这是一个实验性的功能,在未来的升级中可能会发生变化。

当多个 <SWRConfig> 组件嵌套时,可以扩展缓存 provider。

provider 函数的第一个参数是上层 <SWRConfig> 的缓存 provider(如果没有父级 <SWRConfig>,则为默认缓存),你可以使用它来扩展缓存 provider:

<SWRConfig value={{ provider: (cache) => newCache }}>
  ...
</SWRConfig>

示例

根据正则更改多个 Key

借助缓存 provider API 的灵活性,你甚至可以构建一个“部分更改”的助手函数。

在下面的示例中,matchMutate 可以接收一个正则表达式作为 key,并用于更改匹配该模式的。

function useMatchMutate() {
  const { cache, mutate } = useSWRConfig()
  return (matcher, ...args) => {
    if (!(cache instanceof Map)) {
      throw new Error('matchMutate requires the cache provider to be a Map instance')
    }

    const keys = []

    for (const key of cache.keys()) {
      if (matcher.test(key)) {
        keys.push(key)
      }
    }

    const mutations = keys.map((key) => mutate(key, ...args))
    return Promise.all(mutations)
  }
}

在你的组件内:

function Button() {
  const matchMutate = useMatchMutate()
  return <button onClick={() => matchMutate(/^\/api\//)}>
    重新请求所有以 `/api/` 开头的 key
  </button>
}
💡

注意,该示例要求缓存 provider 为 Map 实例。

基于 LocalStorage 的持久缓存

你可能希望将缓存同步到 localStorage。下面是一个示例实现:

function localStorageProvider() {
  // 初始化时,我们将数据从 `localStorage` 恢复到一个 map 中。
  const map = new Map(JSON.parse(localStorage.getItem('app-cache') || '[]'))

  // 在卸载 app 之前,我们将所有数据写回 `localStorage` 中。
  window.addEventListener('beforeunload', () => {
    const appCache = JSON.stringify(Array.from(map.entries()))
    localStorage.setItem('app-cache', appCache)
  })

  // 我们仍然使用 map 进行读写以提高性能。
  return map
}

然后将其作为 provider 使用:

<SWRConfig value={{ provider: localStorageProvider }}>
  <App/>
</SWRConfig>
💡

作为一种改进,你还可以使用内存缓存作为缓冲区,并定期写入 localStorage。你还可以使用 IndexedDB 或 WebSQL 实现类似的分层缓存。

重置测试用例之间的缓存

在测试应用程序时,你可能希望重置测试用例之间的 SWR 缓存。你可以简单地使用空缓存 provider 包装你的应用程序。下面是一个使用 Jest 的例子:

describe('test suite', async () => {
  it('test case', async () => {
    render(
      <SWRConfig value={{ provider: () => new Map() }}>
        <App/>
      </SWRConfig>
    )
  })
})

访问缓存

警告:你不应该直接写入缓存,那样可能会导致不可预知的行为。

const { cache } = useSWRConfig()

cache.get(key) // 获取 key 的当前数据。
cache.clear()  // ⚠️ 清除所有缓存。SWR 将在重新渲染时重新请求。