状态管理器通过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 应深拷贝存入历史，避免引用共享导致意外修改。
如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型
27
查看详情
实际应用中的优化点
在真实项目中可加入以下改进：
- 限制 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];
}
}
基本上就这些。只要理清状态流向，实现并不复杂，但容易忽略深拷贝和边界判断。
大家都在看：
神马搜索App标签搜索管理教程_神马搜索App分类整理指南
神马搜索App翻译历史管理介绍_神马搜索App常用语保存方法
c++中“三/五/零之法则”（Rule of Three/Five/Zero）是什么_c++对象生命周期管理原则说明
win10无法安装cab更新包怎么办_win10CAB更新包安装失败处理方法
暂无评论内容