具有直接读取和变异功能的 React 状态管理库？

Question

对于我当前的个人项目来说，Valtio 是“几乎”完美的 React 状态管理库。 https://github.com/pmndrs/valtio 对我来说的好处是：

我可以使用状态对象，而不必担心不必要的重新渲染。如果

foo
• 的值发生变化，

  App

  不在乎。我可以直接改变状态。在我的实际应用程序中，我有深度嵌套状态。

import React from 'react'
import {proxy, useSnapshot} from 'valtio';
const state = proxy({ count: 0, foo: 'bar' })

export default function App() {
  const snap = useSnapshot(state);
  return (
    <div className="App">
      <h2>Number: {snap.count}</h2>
      <button onClick={()=>state.count++}>+</button>
    </div>
  );
}

关于 API，我唯一希望更改的是您需要一个不同的对象来监听和更新状态。是否有任何状态管理库可以将单个对象用于两者？我完美的 API 应该是这样的：

import React from 'react'
import {proxy} from 'some-library';
const state = proxy({ count: 0, foo: 'bar' })

export default function App() {
  return (
    <div className="App">
      <h2>Number: {state.count}</h2>
      <button onClick={()=>state.count++}>+</button>
    </div>
  );
}

或者必须使用钩子（或其他什么），但是使用相同的钩子来读取和写入也很酷：

import React from 'react'
import {proxy, useSnapshot} from 'some-library';
const state = proxy({ count: 0, foo: 'bar' })

export default function App() {
  const snap = useSnapshot(state);
  return (
    <div className="App">
      <h2>Number: {snap.count}</h2>
      <button onClick={()=>snap.count++}>+</button>
    </div>
  );
}

是否有一个库具有类似的开发人员体验？

Answer 1

话虽如此，valtio 的实用程序中包含一个名为

useProxy

的钩子，它实际上可以满足您的要求。任何时候一个属性是

read

（使用 get()），它都会返回一个不可变的快照。每当发生变异时，它都会改变代理。

这是一个例子。