如何用 Proxy 实现可撤销的数据状态机

本文深入探讨了如何利用 JavaScript 的 Proxy 对象构建一个轻量、高效且可撤销的数据状态机，核心在于通过 set 拦截器自动捕获每次状态变更，即时深拷贝并存档快照，同时维护指向历史记录的 currentIndex 指针和清空失效的重做栈，从而天然支持原子化的 undo/redo 操作；文章不仅剖析了快照序列化、内存控制、指针边界校验等关键技术细节，更强调撤销应贴合用户操作语义（如合并批量变更、记录 action 类型），并务实建议优先采用 valtio-history 等经过验证的封装方案，避免手写逻辑在嵌套响应、异步竞争等场景下的潜在陷阱——让撤销功能既健壮可靠，又具备良好的可调试性与 UI 可控性。

用 Proxy 实现带撤销功能的数据状态机，核心在于拦截赋值操作并自动保存历史快照，而不是靠手动记录或轮询比对。关键不在于“重写所有逻辑”，而是在 set 拦截中触发快照存档，并维护一个可回溯的指针结构。

用 Proxy 拦截变更并存档快照

每次对代理对象属性赋值时，set trap 会捕获该操作。此时应： - 先深拷贝当前 state（避免后续修改污染历史） - 将拷贝推入历史数组 - 更新当前值 - 重置“重做”栈（因新操作使后续重做失效）

• 不要直接 push 原始引用，要用 structuredClone 或 JSON 序列化+解析（注意函数、Date 等需特殊处理）
• 快照应包含时间戳和操作标识（如字段名），便于调试与可视化
• 为避免内存膨胀，可限制历史长度（如只保留最近 50 步）

封装 undo/redo 方法并管理指针位置

状态机需维护 currentIndex（指向当前有效状态在 history 数组中的索引）。初始为 0，每 undo 减 1，每 redo 加 1。实际取值时，根据 currentIndex 从 history 中读取对应快照。

• undo 前检查 currentIndex > 0；redo 前检查 currentIndex
• 执行 undo 后，用 Object.assign 或逐字段赋值还原到上一快照，再更新 currentIndex
• 不建议直接替换整个 proxy.value，而是同步目标对象，保持响应式链路不断

结合 valtio-history 等成熟方案更稳妥

手写完整撤销逻辑易出错（如嵌套对象变更未触发快照、异步赋值竞争等）。推荐优先使用 proxyWithHistory 这类已验证工具：

• 它内部已处理 deep clone、指针边界、批量变更合并等细节
• 暴露 canUndo/canRedo 方法，方便控制 UI 按钮禁用状态
• history.nodes 是不可变快照数组，value 始终是当前状态的响应式代理

注意撤销粒度与用户预期一致

撤销不是按“每次 set 调用”机械回退，而应匹配用户操作语义。例如： - 用户点击一次“加粗”按钮，可能触发多个样式字段变更 → 应合并为单次快照 - 可在 handler 的 set 中引入防抖或事务标记（如 startTransaction/endTransaction） - 或配合外部 action 名称，在快照中记录 { type: 'toggle-bold', payload: {...} }，便于重放与审计

本篇关于《如何用 Proxy 实现可撤销的数据状态机》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！