JotaiJotai

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

Valtio

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

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

这仅使用 valtio 的原生 api。

安装

您必须安装 valtiojotai-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 })

示例