状态管理器通过history和future数组实现撤销重做，2. setState保存深拷贝并清空future，3. undo将当前状态移入future并返回上一状态，4. redo恢复最近被撤销的状态，5. 提供canUndo/canRedo判断操作可行性，6. 实际应用可优化历史长度、合并操作、添加订阅与序列化机制。
实现一个支持历史记录和撤销重做的状态管理器，核心是维护当前状态以及过去和未来的状态序列。关键是通过栈结构保存状态快照，并提供清晰的 API 控制前进后退。
基本数据结构设计
使用两个数组分别存储历史状态和已撤销的未来状态：
history：保存从初始状态到当前状态的所有快照，当前状态始终是数组最后一项future：保存被撤销的状态，用于重做操作
每次修改状态时，将当前状态推入 history 栈，同时清空 future（因为修改分支会改变后续路径）。
核心操作方法
状态管理器应提供以下关键方法：
setState(newState)：更新当前状态，把原状态存入历史，并清空 future 数组undo()：从 history 弹出最近状态，推入 future，返回上一状态redo()：从 future 弹出状态，推回 history，恢复之前撤销的状态canUndo()/canRedo()：判断是否可撤销或重做，用于 UI 禁用控制
注意：state 应深拷贝存入历史，避免引用共享导致意外修改。
实际应用中的优化点
在真实项目中可加入以下改进：
限制 history 最大长度，防止内存溢出支持批量操作合并，比如连续输入时只保存最终结果提供订阅机制，状态变化时通知视图更新序列化状态以便持久化或同步
例如文本编辑器可在用户停止输入 500ms 后才保存一次快照，减少冗余记录。
简单实现示例
以 JavaScript 为例：
class StateHistory {
constructor(initialState) {
this.history = [JSON.parse(JSON.stringify(initialState))];
this.future = [];
}
setState(newState) {
this.history.push(JSON.parse(JSON.stringify(newState)));
this.future = [];
}
undo() {
if (this.history.length const state = this.history.pop();
this.future.push(state);
return this.currentState();
}
redo() {
if (this.future.length === 0) return null;
const state = this.future.pop();
this.history.push(state);
return state;
}
currentState() {
return this.history[this.history.length – 1];
}
}
基本上就这些。只要理清状态流向，实现并不复杂，但容易忽略深拷贝和边界判断。
以上就是如何实现一个支持历史记录和撤销重做的状态管理器？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529569.html
微信扫一扫 
支付宝扫一扫 
