Cache

Jotai 提供了一些原始函数来优化重新渲染。 它只设计用来保存"当前"的原子值，并不会缓存旧的值。

有时候，缓存是很有用的。例如，如果一个异步原子触发了网络请求，我们可能想要缓存这些响应。

jotai-cache 是一个第三方库，用来帮助处理这类情况。

安装

npm i jotai-cache

atomWithCache

atomWithCache(read, options): Atom

atomWithCache 创建一个带有缓存的新的只读原子。

参数

read: 定义只读原子的读取函数。

options (可选): 一个选项对象，用来自定义原子的行为

选项

size (可选): 缓存项的最大大小。

shouldRemove (可选): 一个函数，用来检查是否应该移除缓存项。

areEqual (可选): 一个函数，用来比较原子值。

示例

import { atom, useAtom } from 'jotai'
import { atomWithCache } from 'jotai-cache'

const idAtom = atom(1)

const normalAtom = atom(async (get) => {
  const id = get(idAtom)
  const response = await fetch(`https://reqres.in/api/users/${id}?delay=1`)
  return response.json()
})

const cachedAtom = atomWithCache(async (get) => {
  const id = get(idAtom)
  const response = await fetch(`https://reqres.in/api/users/${id}?delay=1`)
  return response.json()
})

const NormalUser = () => {
  const [{ data }] = useAtom(normalAtom)
  return (
    <div>
      <h1>用户 (普通原子)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>名字: {data.first_name}</li>
        <li>姓氏: {data.last_name}</li>
      </ul>
    </div>
  )
}

const CachedUser = () => {
  const [{ data }] = useAtom(cachedAtom)
  return (
    <div>
      <h1>用户 (带缓存的原子)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>名字: {data.first_name}</li>
        <li>姓氏: {data.last_name}</li>
      </ul>
    </div>
  )
}

const App = () => {
  const [id, setId] = useAtom(idAtom)
  return (
    <div>
      ID: {id}{' '}
      <button type="button" onClick={() => setId((c) => c - 1)}>
        上一个
      </button>{' '}
      <button type="button" onClick={() => setId((c) => c + 1)}>
        下一个
      </button>
      <hr />
      <Suspense fallback="加载中...">
        <CachedUser />
      </Suspense>
      <hr />
      <Suspense fallback="加载中...">
        <NormalUser />
      </Suspense>
    </div>
  )
}

Codesandbox