寻求支持单对象读写的React状态管理库（优化Valtio体验）

以下几个状态管理库既能保留Valtio的核心优势（避免不必要重渲染、支持深层状态修改），又能实现你期望的"同一对象完成读写"的开发体验：

Jotai #

Jotai以原子为核心，支持细粒度状态更新，可轻松封装出直接读写的状态对象：

import React from 'react'
import { atom, useAtom } from 'jotai';

// 定义全局状态原子
const stateAtom = atom({ count: 0, foo: 'bar' });

export default function App() {
  const [state, setState] = useAtom(stateAtom);
  
  // 封装成可直接修改的代理对象
  const mutableState = new Proxy(state, {
    set(target, prop, value) {
      setState(prev => ({ ...prev, [prop]: value }));
      return true;
    }
  });

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

Zustand #

Zustand轻量灵活，通过自定义Hook可快速实现同一对象的读写操作：

import React from 'react'
import create from 'zustand';

// 创建全局状态store
const useStore = create((set) => ({
  count: 0,
  foo: 'bar',
}));

// 封装支持直接修改的状态对象
const useMutableStore = () => {
  const store = useStore();
  return new Proxy(store, {
    set(target, prop, value) {
      if (['count', 'foo'].includes(prop)) {
        useStore.setState({ [prop]: value });
      }
      return true;
    }
  });
};

export default function App() {
  const state = useMutableStore();

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

react-tracked #

react-tracked基于React Context实现，结合Immer可实现直接修改状态的体验，同时自动处理细粒度重渲染：

import React from 'react'
import { createTrackedSelector } from 'react-tracked';
import { useImmer } from 'use-immer';

const initialState = { count: 0, foo: 'bar' };
const useValue = () => useImmer(initialState);
const useTracked = createTrackedSelector(useValue);

export default function App() {
  const [state, setState] = useTracked();
  
  // 封装成可直接修改的对象
  const mutableState = new Proxy(state, {
    set(target, prop, value) {
      setState(draft => {
        draft[prop] = value;
      });
      return true;
    }
  });

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

内容的提问来源于stack exchange，提问作者Evanss