JotaiJotai

状態
原始和灵活的 React 状态管理

缓存

Jotai 提供原始函数来优化重新渲染。 它旨在仅保存“当前”原子值，并且不缓存旧值。

缓存有时很有用。 例如，如果异步原子触发网络请求，我们可能希望缓存响应。

jotai-cache 是一个第三方库来帮助此类用例。

安装

yarn add 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>User (normal atom)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>First name: {data.first_name}</li>
        <li>Last name: {data.last_name}</li>
      </ul>
    </div>
  );
};


const CachedUser = () => {
  const [{ data }] = useAtom(cachedAtom);
  return (
    <div>
      <h1>User (cached atom)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>First name: {data.first_name}</li>
        <li>Last name: {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)}>
        Prev
      </button>{" "}
      <button type="button" onClick={() => setId((c) => c + 1)}>
        Next
      </button>
      <hr />
      <Suspense fallback="Loading...">
        <CachedUser />
      </Suspense>
      <hr />
      <Suspense fallback="Loading...">
        <NormalUser />
      </Suspense>
    </div>
  );
};

Codesandbox

GitHubnpm