Valtio状态工厂：动态创建和管理状态实例的方法
项目地址: https://gitcode.com/gh_mirrors/va/valtio 在现代前端应用开发中，状态管理是核心挑战之一。随着应用复杂度提升，我们经常需要创建多个相似但独立的状态实例，如多用户会话、多标签页数据或动态表单状态。Valtio作为轻量级状态管理库，提供了直观的代理状态(Proxy-State)机制，本文将介绍如何构建"状态工厂"模式，实现状态实例的动态创建、管理和销毁。
状态工厂的核心价值
传统状态管理方式在面对动态实例场景时往往显得笨拙：全局状态容易导致命名冲突，Context API嵌套复杂，Redux则需要大量样板代码。Valtio的代理状态特性为解决这一问题提供了新思路，通过状态工厂我们可以：
- 按需创建独立状态实例，避免全局污染
- 统一管理实例生命周期，自动清理无效状态
- 实现状态模板复用，保持代码一致性
- 简化跨组件状态共享，提升开发效率
实现基础：Valtio核心API解析
Valtio的状态工厂构建依赖于几个核心API，理解这些API是实现动态状态管理的基础。
proxy函数：状态创建的基石
proxy函数是Valtio的核心，它将普通对象转换为响应式代理。与传统的状态管理不同，Valtio使用ES6 Proxy API实现深层响应式，无需手动触发更新。
// [src/vanilla.ts](https://link.gitcode.com/i/f1a3eccbc5111b71b0763f3259a5ff36)
export function proxy<T extends object>(baseObject: T = {} as T): T {
if (!isObject(baseObject)) {
throw new Error('object required')
}
// 创建代理逻辑...
return proxyObject
}
这个函数接收一个普通对象并返回一个代理对象，所有对代理对象的修改都会自动触发订阅者更新。状态工厂正是利用这一特性，动态生成多个独立的代理实例。
snapshot函数：状态读取的安全层
为了在React组件中安全使用代理状态，Valtio提供了snapshot函数，它创建代理对象的不可变快照，避免在渲染期间意外修改状态。
// [src/vanilla.ts](https://link.gitcode.com/i/f1a3eccbc5111b71b0763f3259a5ff36)
export function snapshot<T extends object>(proxyObject: T): Snapshot<T> {
const proxyState = proxyStateMap.get(proxyObject as object)
if (import.meta.env?.MODE !== 'production' && !proxyState) {
console.warn('Please use proxy object')
}
const [target, ensureVersion] = proxyState as ProxyState
return createSnapshot(target, ensureVersion()) as Snapshot<T>
}
快照机制确保了组件渲染的稳定性，同时提供了状态的只读视图，是构建安全状态访问的关键。
useProxy钩子：React中的状态绑定
在React组件中使用状态时，useProxy钩子提供了便捷的状态绑定方式，它结合了snapshot和代理特性，既保证了响应式更新，又维持了引用稳定性。
// [src/react/utils/useProxy.ts](https://link.gitcode.com/i/cb33b6d0dd00a7c5c84b0b64e1062a34)
export function useProxy<T extends object>(
proxy: T,
options?: NonNullable<Parameters<typeof useSnapshot>[1]>,
): T {
const snapshot = useSnapshot(proxy, options) as T
// touch dummy prop so that it doesn't trigger re-renders when no props are touched.
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
;(snapshot as any)[DUMMY_SYMBOL]
let isRendering = true
useLayoutEffect(() => {
// This is an intentional hack
// It might not work with React Compiler
// eslint-disable-next-line react-hooks/react-compiler, react-hooks/exhaustive-deps
isRendering = false
})
return new Proxy(proxy, {
get(target, prop) {
return isRendering ? snapshot[prop as keyof T] : target[prop as keyof T]
},
})
}
这个钩子在渲染期间使用快照值，在回调中使用原始代理，完美平衡了性能和开发体验。
构建状态工厂：从理论到实践
状态工厂的核心思想是创建一个能够动态生成和管理状态实例的工厂类或对象。下面我们将逐步实现一个功能完善的状态工厂。
基础工厂实现
首先，我们创建一个简单的状态工厂，它能够基于模板创建多个独立状态实例：
import { proxy } from './src/vanilla'
// 定义状态模板接口
interface CounterTemplate {
count: number
increment: () => void
decrement: () => void
}
// 创建状态工厂
class CounterFactory {
// 存储所有实例
private instances = new Map<string, CounterTemplate>()
// 创建新实例
createInstance(id: string, initialCount = 0): CounterTemplate {
if (this.instances.has(id)) {
throw new Error(`Instance with id ${id} already exists`)
}
// 创建带方法的状态实例
const instance = proxy<CounterTemplate>({
count: initialCount,
increment: () => { instance.count++ },
decrement: () => { instance.count-- }
})
this.instances.set(id, instance)
return instance
}
// 获取实例
getInstance(id: string): CounterTemplate | undefined {
return this.instances.get(id)
}
// 销毁实例
destroyInstance(id: string): void {
this.instances.delete(id)
}
// 获取所有实例ID
getAllInstanceIds(): string[] {
return Array.from(this.instances.keys())
}
}
// 使用工厂
const counterFactory = new CounterFactory()
const user1Counter = counterFactory.createInstance('user1', 10)
const user2Counter = counterFactory.createInstance('user2', 20)
// 在组件中使用
function UserCounter({ userId }: { userId: string }) {
const counter = counterFactory.getInstance(userId)
if (!counter) return null
const proxyCounter = useProxy(counter)
return (
<div>
<p>Count: {proxyCounter.count}</p>
<button onClick={proxyCounter.increment}>+</button>
<button onClick={proxyCounter.decrement}>-</button>
</div>
)
}
这个基础工厂实现了状态实例的创建、获取和销毁功能，每个实例都是独立的响应式对象，拥有自己的状态和方法。
高级工厂特性：生命周期管理
为了使状态工厂更加健壮，我们可以添加生命周期管理和自动清理功能：
class AdvancedCounterFactory {
private instances = new Map<string, {
state: CounterTemplate
subscribers: number
}>()
createInstance(id: string, initialCount = 0): CounterTemplate {
if (this.instances.has(id)) {
// 如果实例已存在，增加订阅计数
const instance = this.instances.get(id)!
instance.subscribers++
return instance.state
}
const state = proxy<CounterTemplate>({
count: initialCount,
increment: () => { state.count++ },
decrement: () => { state.count-- }
})
this.instances.set(id, {
state,
subscribers: 1 // 初始订阅数为1
})
return state
}
// 获取实例并增加订阅
getInstance(id: string): CounterTemplate | undefined {
const instance = this.instances.get(id)
if (instance) {
instance.subscribers++
return instance.state
}
return undefined
}
// 释放实例（减少订阅）
releaseInstance(id: string): void {
const instance = this.instances.get(id)
if (instance) {
instance.subscribers--
// 当订阅数为0时自动清理
if (instance.subscribers <= 0) {
this.destroyInstance(id)
}
}
}
// 强制销毁实例
destroyInstance(id: string): void {
this.instances.delete(id)
}
}
这个高级工厂实现了引用计数机制，当实例不再被使用时（订阅数为0）会自动清理，有效防止内存泄漏。
实战应用：多用户会话管理
让我们通过一个更贴近实际的例子，展示如何使用状态工厂管理多用户会话：
import { proxy } from './src/vanilla'
import { useProxy } from './src/react/utils/useProxy.ts'
// 定义用户会话状态接口
interface UserSession {
userId: string
userName: string
online: boolean
lastActive: Date
messages: string[]
addMessage: (text: string) => void
setOnline: (status: boolean) => void
}
class SessionFactory {
private sessions = new Map<string, UserSession>()
// 创建用户会话
createSession(userId: string, userName: string): UserSession {
if (this.sessions.has(userId)) {
return this.sessions.get(userId)!
}
const session = proxy<UserSession>({
userId,
userName,
online: true,
lastActive: new Date(),
messages: [],
addMessage: (text: string) => {
session.messages.push(text)
session.lastActive = new Date()
},
setOnline: (status: boolean) => {
session.online = status
session.lastActive = new Date()
}
})
this.sessions.set(userId, session)
return session
}
// 获取所有在线用户
getOnlineUsers(): UserSession[] {
return Array.from(this.sessions.values())
.filter(session => session.online)
}
// 清理过期会话
cleanExpiredSessions(timeoutMs: number): void {
const now = new Date()
const expiredIds: string[] = []
this.sessions.forEach((session, id) => {
if (!session.online &&
now.getTime() - session.lastActive.getTime() > timeoutMs) {
expiredIds.push(id)
}
})
expiredIds.forEach(id => this.sessions.delete(id))
}
// 其他必要的方法...
}
// 使用会话工厂
const sessionFactory = new SessionFactory()
// 创建React组件使用会话
function ChatComponent({ userId }: { userId: string }) {
const session = useProxy(sessionFactory.createSession(userId, "User"))
return (
<div className="chat-session">
<h2>{session.userName} ({session.online ? 'Online' : 'Offline'})</h2>
<div className="messages">
{session.messages.map((msg, idx) => (
<div key={idx} className="message">{msg}</div>
))}
</div>
{/* 消息输入组件等... */}
</div>
)
}
这个例子展示了如何使用状态工厂管理多个用户会话，每个会话都是独立的响应式对象，包含自己的状态和方法。
性能优化与最佳实践
状态拆分与组合
对于复杂状态，建议按功能拆分多个小型工厂，而不是一个大型工厂：
// 更好的做法：拆分多个专注的工厂
const userFactory = new UserFactory()
const messageFactory = new MessageFactory()
const notificationFactory = new NotificationFactory()
// 而不是一个包含所有功能的巨型工厂
// const appFactory = new AppFactory() // 避免这种方式
使用ProxyMap管理动态集合
Valtio提供了ProxyMap工具，可以直接创建响应式的Map集合，适合管理动态实例：
import { proxyMap } from './src/vanilla/utils/proxyMap'
// 使用ProxyMap创建响应式实例集合
const instances = proxyMap<string, CounterTemplate>()
// 直接操作Map，自动保持响应式
instances.set('id1', createCounter())
instances.delete('id1')
避免过度代理
虽然Valtio的代理非常高效，但创建过多不必要的代理实例仍会影响性能。建议：
- 只对需要响应式的对象使用proxy
- 对于大型列表数据，考虑分页或虚拟滚动
- 使用
ref标记不需要深层代理的对象
import { ref } from './src/vanilla'
// 标记不需要深层代理的对象
const largeStaticData = ref({ /* 大量静态数据 */ })
总结与展望
Valtio状态工厂模式为动态状态管理提供了优雅的解决方案，通过本文介绍的方法，你可以：
- 轻松创建多个独立的状态实例
- 统一管理状态生命周期，防止内存泄漏
- 在React组件中安全使用动态状态
- 构建可扩展的大型应用状态架构
随着前端应用复杂度的不断提升，动态状态管理将变得越来越重要。Valtio的轻量级设计和Proxy-based响应式机制，为构建高效、可维护的状态管理系统提供了强大支持。
未来，我们可以进一步探索状态工厂与TypeScript的结合，实现更强类型安全；或研究状态实例的持久化方案，实现跨会话的状态管理。Valtio的简单API背后，隐藏着构建复杂应用状态系统的无限可能。
要了解更多Valtio高级用法，请参考官方文档：docs/how-tos/how-to-split-and-compose-states.mdx 和 docs/guides/component-state.mdx。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
