JotaiJotai

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

useHydrateAtoms

引用: https://github.com/pmndrs/jotai/issues/340

使用

import { atom, useAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";
const countAtom = atom(0);
const CounterPage = ({ countFromServer }) => {
useHydrateAtoms([[countAtom, countFromServer]]);
const [count] = useAtom(countAtom);
// count 将是 countFromServer 的值,而不是 0。
};

useHydrateAtoms 的主要用例是像 Next.js 这样的 SSR 应用程序,其中初始值是例如 在服务器上获取,可以通过 props 传递给组件。

// 定义
function useHydrateAtoms(
values: Iterable<readonly [Atom<unknown>, unknown]>,
scope?: Scope
): void;

该 hook 采用包含 [atom, value] 的可迭代元组作为参数和可选范围。

// 与数组一起使用,指定范围
useHydrateAtoms(
[
[countAtom, 42],
[frameworkAtom, "Next.js"],
],
myScope
);
// 或者用 map
const [initialValues] = useState(() => new Map([[count, 42]]));
useHydrateAtoms(initialValues);

每个作用域中的原子只能 hydrated 一次。 因此,如果在重新渲染期间更改了使用的初始值,则不会更新原子值。

如果需要在多个范围内进行 hydrated,请使用多个 useHydrateAtoms hook 来实现。

useHydrateAtoms([
[countAtom, 42],
[frameworkAtom, "Next.js"],
]);
useHydrateAtoms(
[
[countAtom, 17],
[frameworkAtom, "Gatsby"],
],
myScope
);

Codesandbox

Next.js 部分 中有更多示例。