Valtio

Jotai 的状态驻留在 React 中，但有时与 React 之外的世界交互会很好。

Valtio 提供了一个代理接口，可用于存储一些值并与 Jotai 中的原子同步。

这仅使用 valtio 的原生 api。

安装

您必须安装 valtio 和 jotai-valtio 才能使用此功能。

npm install valtio jotai-valtio
# or
yarn add valtio jotai-valtio

atomWithProxy

atomWithProxy 使用 valtio 代理创建一个新原子。 它是双向绑定，您可以双向更改值。

import { useAtom } from "jotai";
import { atomWithProxy } from "jotai-valtio";
import { proxy } from "valtio/vanilla";

const proxyState = proxy({ count: 0 });
const stateAtom = atomWithProxy(proxyState);
const Counter = () => {
  const [state, setState] = useAtom(stateAtom);

  return (
    <>
      count: {state.count}
      <button
        onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}
      >
        button
      </button>
    </>
  );
};

参数

atomWithProxy(proxyObject, options?)

proxyObject (required): 要从中派生原子的 Valtio 代理对象

options.sync (optional): 使原子同步更新而不是等待批量更新，类似于 valtio/useSnapshot。 这将导致更多渲染，但有更多保证它与其他 Jotai 原子同步。

atomWithProxy(proxyObject, { sync: true })

示例