valtio

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Valtio 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