Valtio
Jotai 的状态驻留在 React 中,但有时与 React 之外的世界交互会很好。
Valtio 提供了一个代理接口,可用于存储一些值并与 Jotai 中的原子同步。
这仅使用 valtio 的原生 api。
安装
您必须安装 valtio
和 jotai-valtio
才能使用此功能。
npm install valtio jotai-valtio# oryarn 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}<buttononClick={() => 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 })