关于 valtio
这是一项介绍 Valtio 的技能，Valtio 是面向 React 和原生 JavaScript 的代理状态库。内容涵盖响应式状态、React 快照、订阅、实用工具，以及状态组织与持久化实践。
主要功能
- 01基于代理的响应式状态
- 02优化渲染的 React 快照
- 03状态变更订阅
- 04可观察的 Map 和 Set 工具
- 05结合 Suspense 处理异步状态
- 06状态组织与持久化
适用场景
- 01构建响应式 React 组件状态
- 02在组件外订阅状态变化
- 03管理可观察的 Map 或 Set 数据
- 04持久化并组合应用状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/valtio确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/best-practices-actions.mdbest-practices-persistence.mdbest-practices-state-composition.mdcore-proxy.mdcore-snapshot.mdcore-subscribe.mdcore-use-snapshot.mdguides-async.mdguides-component-state.mdguides-computed-properties.mdutils-devtools.mdutils-proxy-map.mdutils-proxy-set.mdutils-ref.mdutils-subscribe-key.md详细介绍
Valtio 让 React 和原生 JavaScript 的代理状态变得简单。它提供极简、灵活且不预设观点的 API，将对象转变为具备自我感知能力的代理，从而实现细粒度订阅与响应式。Valtio 在 React 的渲染优化方面表现出色，并兼容 Suspense 和 React 18+。
本技能基于 Valtio v2.3.0，生成于 2026-01-29。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| Proxy | 创建可追踪变化的响应式状态对象 | core-proxy |
| useSnapshot | 用于渲染优化状态访问的 React Hook | core-use-snapshot |
| Snapshot | 创建用于比较和 Suspense 的不可变快照 | core-snapshot |
| Subscribe | 从任意位置订阅状态变化 | core-subscribe |
工具
| 主题 | 描述 | 参考 |
|---|---|---|
| proxyMap | 用于 Map 数据结构的可观察 Map 类代理 | utils-proxy-map |
| proxySet | 用于 Set 数据结构的可观察 Set 类代理 | utils-proxy-set |
| subscribeKey | 订阅特定属性的变化 | utils-subscribe-key |
| DevTools | Redux DevTools Extension 集成 | utils-devtools |
| Ref | 为特殊对象创建非代理引用 | utils-ref |
指南
| 主题 | 描述 | 参考 |
|---|---|---|
| 组件状态 | 使用 useRef 隔离组件状态 | guides-component-state |
| 计算属性 | 使用 getter 和 setter 创建计算属性 | guides-computed-properties |
| 异步 | 配合 promise 和 React Suspense 使用 | guides-async |
最佳实践
| 主题 | 描述 | 参考 |
|---|---|---|
| Actions | 组织用于变更状态的操作 | best-practices-actions |
| 持久化 | 将状态持久化到 localStorage 或其他存储 | best-practices-persistence |
| 状态组合 | 拆分并组合状态以便组织管理 | best-practices-state-composition |
评论
支持 Markdown