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);// 或者用 mapconst [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 部分 中有更多示例。