valtio
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseValtio makes proxy-state simple for React and vanilla JavaScript. It provides a minimal, flexible, and unopinionated API that turns objects into self-aware proxies, enabling fine-grained subscription and reactivity. Valtio shines at render optimization in React and is compatible with Suspense and React 18+.
The skill is based on Valtio v2.3.0, generated at 2026-01-29.
Valtio 让 React 和原生 JavaScript 中的代理状态管理变得简单。它提供了一个轻量、灵活且无偏见的 API，可将对象转换为具备自我感知能力的代理，实现细粒度的订阅和响应式特性。Valtio 在 React 渲染优化方面表现出色，并且兼容 Suspense 和 React 18+。
本技能基于 Valtio v2.3.0，生成于2026年1月29日。
Core References
核心参考
| Topic | Description | Reference |
|---|---|---|
| Proxy | Create reactive state objects that track changes | core-proxy |
| useSnapshot | React hook for render-optimized state access | core-use-snapshot |
| Snapshot | Create immutable snapshots for comparison and Suspense | core-snapshot |
| Subscribe | Subscribe to state changes from anywhere | core-subscribe |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Proxy | 创建可跟踪变更的响应式状态对象 | core-proxy |
| useSnapshot | 用于优化渲染的React状态访问Hook | core-use-snapshot |
| Snapshot | 创建用于比较和Suspense的不可变快照 | core-snapshot |
| Subscribe | 从任意位置订阅状态变更 | core-subscribe |
Utils
工具函数
| Topic | Description | Reference |
|---|---|---|
| proxyMap | Observable Map-like proxy for Map data structures | utils-proxy-map |
| proxySet | Observable Set-like proxy for Set data structures | utils-proxy-set |
| subscribeKey | Subscribe to changes of a specific property | utils-subscribe-key |
| DevTools | Redux DevTools Extension integration | utils-devtools |
| Ref | Create unproxied references for special objects | utils-ref |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| proxyMap | 适用于Map数据结构的可观察类Map代理 | utils-proxy-map |
| proxySet | 适用于Set数据结构的可观察类Set代理 | utils-proxy-set |
| subscribeKey | 订阅特定属性的变更 | utils-subscribe-key |
| DevTools | Redux DevTools扩展集成 | utils-devtools |
| Ref | 为特殊对象创建非代理引用 | utils-ref |
Guides
指南
| Topic | Description | Reference |
|---|---|---|
| Component State | Isolate component state using useRef | guides-component-state |
| Computed Properties | Create computed properties with getters and setters | guides-computed-properties |
| Async | Work with promises and React Suspense | guides-async |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Component State | 使用useRef隔离组件状态 | guides-component-state |
| Computed Properties | 使用getter和setter创建计算属性 | guides-computed-properties |
| Async | 处理Promise和React Suspense | guides-async |
Best Practices
最佳实践
| Topic | Description | Reference |
|---|---|---|
| Actions | Organize actions for mutating state | best-practices-actions |
| Persistence | Persist state to localStorage or other storage | best-practices-persistence |
| State Composition | Split and compose states for organization | best-practices-state-composition |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Actions | 组织用于修改状态的动作 | best-practices-actions |
| Persistence | 将状态持久化到localStorage或其他存储 | best-practices-persistence |
| State Composition | 拆分并组合状态以实现模块化管理 | best-practices-state-composition |