SSR

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 的主要用例是 SSR 应用，如 Next.js，其中初始值例如在服务器上获取，然后可以通过 props 传递给组件。

// 定义
function useHydrateAtoms(
  values: Iterable<readonly [Atom<unknown>, unknown]>,
  options?: { store?: Store },
): void

该 hook 接受一个包含 [atom, value] 元组的可迭代对象作为参数，以及可选的选项。

// 使用数组指定 store 的用法
useHydrateAtoms(
  [
    [countAtom, 42],
    [frameworkAtom, 'Next.js'],
  ],
  { store: myStore },
)
// 或者使用 map
useHydrateAtoms(new Map([[count, 42]]))

每个 store 只能对 Atom 进行一次 hydration。因此，如果在重新渲染期间更改了使用的初始值，它将不会更新 atom 的值。 如果有重新 hydrate 之前已经 hydrate 过的 atom 的特殊需求，可以将可选的 dangerouslyForceHydrate 设置为 true， 并注意在并发渲染中可能会出现错误的行为。

useHydrateAtoms(
  [
    [countAtom, 42],
    [frameworkAtom, 'Next.js'],
  ],
  {
    dangerouslyForceHydrate: true,
  },
)

如果需要在多个 store 中进行 hydration，可以使用多个 useHydrateAtoms hook 来实现。

useHydrateAtoms([
  [countAtom, 42],
  [frameworkAtom, 'Next.js'],
])
useHydrateAtoms(
  [
    [countAtom, 17],
    [frameworkAtom, 'Gatsby'],
  ],
  { store: myStore },
)

如果你在使用 TypeScript 并且目标为 ES5，你可能需要在数组上使用 as const 来保留元组类型。

useHydrateAtoms([
  [countAtom, 42],
  [frameworkAtom, 'Next.js'],
] as const)

在 CodeSandbox 中的代码

在 Next.js 部分 中有更多的例子。