Jotai

React 原始而灵活的状态管理

Valtio

Jotai的状态存在于React中，但有时我们希望能与React之外的世界进行交互。

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

这只使用了valtio的vanilla api。

安装

要使用此功能，你必须安装valtio和jotai-valtio。

npm i 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 }))}
      >
        inc atom
      </button>
      <button
        onClick={() => {
          ++proxyState.count
        }}
      >
        inc proxy
      </button>
    </>
  )
}

参数

atomWithProxy(proxyObject, options?)

proxyObject (必需): 你想从中派生原子的Valtio代理对象

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

atomWithProxy(proxyObject, { sync: true })

示例

mutableAtom

mutableAtom将一个值包装在一个自我意识的Valtio代理中。你可以像对待普通的js对象一样对它进行更改。

计数值存储在value属性下。

const countProxyAtom = mutableAtom(0)

function IncrementButton() {
  const countProxy = useAtomValue(countProxyAtom)
  return <button onClick={() => ++countProxy.value}>+</button>
}

参数

mutableAtom(value, options?)

value (必需): 要代理的值。

options.proxyFn (可选): 允许使用proxyFn进行自定义代理函数的定制。可以是proxy（默认）或自定义函数。

示例

注意直接在原子的读取函数或渲染过程中改变代理

请注意不要在原子的读取函数或渲染过程中直接改变代理。这样做可能会导致无限的渲染循环。

const countProxyAtom = mutableAtom(0)

atom(
  (get) => {
    const countProxy = get(countProxyAtom)
    ++countProxy.value // 这将导致无限循环
  },
  (get, set) => {
    const countProxy = get(countProxyAtom)
    ++countProxy.value // 这是可以的
  },
)

JotaiJotai

Valtio

Jotai