valtio

Valtio 是一个围绕 JavaScript Proxy 构建的状态管理库，可用于 React，也可在原生 JavaScript 中使用。其核心理念很简单：用 `proxy()` 包装一个状态对象，它就会变成一个可自我感知的代理，可以像普通对象一样在代码中的任何位置被修改。 README 中描述的主要能力： - **代理状态**：`proxy({ count: 0, text: 'hello' })` 创建可变状态；诸如 `++state.count` 这样的修改与普通对象一样工作。 - **React 集成**：`useSnapshot(state)` 返回用于渲染的本地快照。只有当状态中被访问的部分发生变化时，组件才会重新渲染，项目将其描述为渲染优化。`sync: true` 选项会禁用批处理，适用于受控输入等场景。 - **订阅**：`subscribe` 可作用于整个状态或子对象，`subscribeKey` 则针对原始值。`watch` 工具会根据使用情况自动订阅。 - **Suspense 支持**：兼容 React 19 的 `use` hook，用于读取状态中持有的异步数据，由父级处理 fallback 和错误。 - **非追踪对象**：`ref` 可将大型或特殊对象（例如 DOM 节点）保留在状态中而不对其代理。 - **原生用法**：`valtio/vanilla` 导出 `proxy`、`subscribe` 和 `snapshot`，供 React 之外使用。 - **工具**：`useProxy` 为初学者提供简化的浅层代理；`proxySet` 和 `proxyMap` 模拟原生 Set 和 Map 的行为；计算属性可通过对象 getter 定义。 - **开发工具**：与 Redux DevTools Extension 集成，适用于普通对象和数组。 - **兼容性**：Valtio v2 面向 React 18 及以上版本，仅依赖 `react`，可与 react-dom、react-native 和 react-three-fiber 等渲染器以及 Node.js 和 Next.js 配合使用。 README 还指出了围绕只读快照类型的 TypeScript 类型注意事项，提醒方法中的 `this` 行为（建议使用箭头函数），并指向一个 eslint 插件以及社区方案，用于组织 actions、持久化状态、使用 context 以及拆分/组合状态。