在前端开发中，撤销和重做功能是提升用户体验的重要特性。无论是文本编辑器、图形设计工具，还是可视化搭建平台，都需要提供历史操作的回退和前进能力。

这个功能看似简单，但实现起来需要考虑性能、内存占用、用户体验等多个方面。

核心原理：

Undo 和 Redo 的核心就是：

• 把用户的操作记录下来

• 能在历史记录里往回退（Undo）或前进（Redo）

这个功能实现的底层思路有两种：

const undoStack: Command[] = [];
const redoStack: Command[] = [];

interface Command {
  execute(): void; // 执行操作
  undo(): void; // 撤销操作
}

function runCommand(cmd: Command) {
  cmd.execute();
  undoStack.push(cmd);
  // 新操作清空 redo 栈
  redoStack.length = 0;
}


function undo() {
  const cmd = undoStack.pop();
  if (!cmd) return;
  cmd.undo();
  redoStack.push(cmd);
}


function redo() {
  const cmd = redoStack.pop();
  if (!cmd) return;
  cmd.execute();
  undoStack.push(cmd);
}

<button onclick="undo()">撤销</button> <button onclick="redo()">重做</button>

命令实现示例

文本编辑器示例

假设我们有一个简单的文本编辑器对象：

class Editor {
  private text = "";


  getText() {
    return this.text;
  }


  setText(val: string) {
    this.text = val;
  }
}

我们封装一个"追加文本"的命令：

class AppendTextCommand implements Command {
  private prevText: string;


  constructor(private editor: Editor, private newText: string) {
    this.prevText = "";
  }


  execute() {
    // 保存旧状态
    this.prevText = this.editor.getText();
    this.editor.setText(this.prevText + this.newText);
  }


  undo() {
    // 恢复旧状态
    this.editor.setText(this.prevText);
  }
}

使用示例：

const editor = new Editor();


runCommand(new AppendTextCommand(editor, "Hello"));
runCommand(new AppendTextCommand(editor, ", world!"));


console.log(editor.getText()); // Hello, world!


undo();
console.log(editor.getText()); // Hello


redo();
console.log(editor.getText()); // Hello, world!

DOM 操作示例

在实际的前端开发中，我们经常需要操作 DOM 元素。下面是一个删除节点的命令示例：

class DeleteNodeCommand implements Command {
  private parentNode: Node | null = null;
  private nextSibling: Node | null = null;
  private deletedNode: Node;


  constructor(private node: Node) {
    this.deletedNode = node;
  }


  execute() {
    this.parentNode = this.node.parentNode;
    this.nextSibling = this.node.nextSibling;
    this.parentNode?.removeChild(this.node);
  }


  undo() {
    if (this.parentNode && this.deletedNode) {
      if (this.nextSibling) {
        this.parentNode.insertBefore(this.deletedNode, this.nextSibling);
      } else {
        this.parentNode.appendChild(this.deletedNode);
      }
    }
  }
}

这个命令保存了被删除节点的父节点和下一个兄弟节点，这样在撤销时可以精确地恢复到原来的位置。对于插入节点的操作，我们可以类似地保存插入位置的信息。

样式修改示例

修改元素样式的命令：

class ChangeStyleCommand implements Command {
  private oldValue: string;


  constructor(
    private element: HTMLElement,
    private property: string,
    private newValue: string
  ) {
    this.oldValue = "";
  }


  execute() {
    this.oldValue = this.element.style[this.property] || "";
    this.element.style[this.property] = this.newValue;
  }


  undo() {
    this.element.style[this.property] = this.oldValue;
  }
}

命令组合

有时候一个用户操作可能包含多个子操作，比如"复制粘贴"操作。我们可以使用组合命令：

class CompositeCommand implements Command {
  private commands: Command[] = [];


  addCommand(cmd: Command) {
    this.commands.push(cmd);
  }


  execute() {
    this.commands.forEach((cmd) => cmd.execute());
  }


  undo() {
    // 反向执行撤销
    for (let i = this.commands.length - 1; i >= 0; i--) {
      this.commands[i].undo();
    }
  }
}

使用组合命令可以让我们将多个相关操作作为一个整体进行撤销和重做，这在复杂编辑器中非常有用。例如，在图形编辑器中，移动一个元素可能同时需要更新多个属性（位置、层级、连接关系等），这些操作可以组合成一个命令。

拖拽操作示例

拖拽是前端常见的交互，实现拖拽的撤销重做需要保存位置信息：

class DragCommand implements Command {
  private startX: number;
  private startY: number;
  private endX: number;
  private endY: number;


  constructor(
    private element: HTMLElement,
    startX: number,
    startY: number,
    endX: number,
    endY: number
  ) {
    this.startX = startX;
    this.startY = startY;
    this.endX = endX;
    this.endY = endY;
  }


  execute() {
    this.element.style.left = `${this.endX}px`;
    this.element.style.top = `${this.endY}px`;
  }


  undo() {
    this.element.style.left = `${this.startX}px`;
    this.element.style.top = `${this.startY}px`;
  }
}

状态快照法

对于简单状态，例如 Redux 的整个状态对象，快照法很常用：

// 假设 state 是一个对象
const history: any[] = [];
let pointer = -1;


function saveState(state: any) {
  // 清空未来版本（如果有新操作，之前的 redo 历史就无效了）
  history.splice(pointer + 1);
  // 深拷贝当前状态
  history.push(JSON.parse(JSON.stringify(state)));
  pointer = history.length - 1;
}


function undoState() {
  if (pointer > 0) {
    pointer--;
    return JSON.parse(JSON.stringify(history[pointer]));
  }
  return null;
}


function redoState() {
  if (pointer < history.length - 1) {
    pointer++;
    return JSON.parse(JSON.stringify(history[pointer]));
  }
  return null;
}

缺点是复制整个状态对象成本高，适合状态较小场景。如果状态对象很大，每次保存快照都会消耗大量内存和时间。对于支持结构化克隆的环境，可以使用更高效的深拷贝方法：

function saveState(state: any) {
  history.splice(pointer + 1);
  // 使用结构化克隆，比 JSON 序列化更快且支持更多类型
  history.push(structuredClone(state));
  pointer = history.length - 1;
}

结构化克隆比 JSON.parse(JSON.stringify()) 更快，并且支持更多数据类型（如 Date、RegExp、Map、Set 等）。

性能优化

限制历史长度

无限制记录可能爆内存，特别是在长时间使用的应用中：

const MAX_HISTORY = 50;


function runCommand(cmd: Command) {
  cmd.execute();
  undoStack.push(cmd);


  // 限制历史长度
  if (undoStack.length > MAX_HISTORY) {
    undoStack.shift(); // 移除最旧的操作
  }


  redoStack.length = 0;
}

合并相似操作

例如连续输入文本可以合并成一个操作组，避免每个输入都记录一条。这对于提升性能和用户体验都很重要：

class TextInputCommand implements Command {
  private prevText: string;
  private inputBuffer: string = "";
  private debounceTimer: number | null = null;


  constructor(private editor: Editor) {
    this.prevText = "";
  }


  addText(text: string) {
    this.inputBuffer += text;


    // 清除之前的定时器
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
    }


    // 延迟执行，合并连续输入
    this.debounceTimer = setTimeout(() => {
      this.execute();
      this.inputBuffer = "";
    }, 300); // 300ms 内的输入会被合并
  }


  execute() {
    this.prevText = this.editor.getText();
    this.editor.setText(this.prevText + this.inputBuffer);
  }


  undo() {
    this.editor.setText(this.prevText);
  }
}

同步 UI 状态

每次 undo/redo 后触发 UI 更新，确保按钮状态和界面显示一致：

键盘快捷键支持

大多数应用都支持 Ctrl+Z 和 Ctrl+Y（或 Ctrl+Shift+Z）快捷键：

document.addEventListener("keydown", (e) => {
  // Ctrl+Z 或 Cmd+Z (Mac)
  if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
    e.preventDefault();
    undo();
  }


  // Ctrl+Y 或 Ctrl+Shift+Z 或 Cmd+Shift+Z (Mac)
  if (
    (e.ctrlKey || e.metaKey) &&
    (e.key === "y" || (e.key === "z" && e.shiftKey))
  ) {
    e.preventDefault();
    redo();
  }
});

延迟执行

对于频繁的操作（如拖拽、实时输入），可以使用防抖或节流来减少历史记录的数量：

function debounce<T extends (...args: any[]) => void>(
  func: T,
  wait: number
): T {
  let timeout: number | null = null;
  return ((...args: any[]) => {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  }) as T;
}


// 使用防抖的保存函数
const debouncedSave = debounce((state: any) => {
  saveState(state);
}, 500); // 500ms 内的操作只保存最后一次

增量更新

对于大型状态对象，可以使用增量更新而不是完整快照：

interface Diff {
  path: string[];
  oldValue: any;
  newValue: any;
}


class IncrementalSnapshot {
  private diffs: Diff[] = [];


  applyDiff(diff: Diff) {
    this.diffs.push(diff);
  }


  applyToState(state: any): any {
    const newState = JSON.parse(JSON.stringify(state));
    this.diffs.forEach((diff) => {
      let target = newState;
      for (let i = 0; i < diff.path.length - 1; i++) {
        target = target[diff.path[i]];
      }
      target[diff.path[diff.path.length - 1]] = diff.newValue;
    });
    return newState;
  }


  reverse(): IncrementalSnapshot {
    const reversed = new IncrementalSnapshot();
    this.diffs.forEach((diff) => {
      reversed.diffs.push({
        path: diff.path,
        oldValue: diff.newValue,
        newValue: diff.oldValue,
      });
    });
    reversed.diffs.reverse();
    return reversed;
  }
}

增量更新只保存状态变化的部分，而不是整个状态对象，这在状态对象很大时能显著减少内存占用。

React Hook 实现

在 React 中，我们可以创建一个自定义 Hook 来管理撤销重做：

import { useState, useCallback } from "react";


function useUndoRedo<T>(initialState: T) {
  const [history, setHistory] = useState<{
    past: T[];
    present: T;
    future: T[];
  }>({
    past: [],
    present: initialState,
    future: [],
  });


  const setState = useCallback((newState: T) => {
    setHistory((prev) => ({
      past: [...prev.past, prev.present],
      present: newState,
      future: [],
    }));
  }, []);


  const undo = useCallback(() => {
    setHistory((prev) => {
      if (prev.past.length === 0) return prev;
      const previous = prev.past[prev.past.length - 1];
      const newPast = prev.past.slice(0, prev.past.length - 1);
      return {
        past: newPast,
        present: previous,
        future: [prev.present, ...prev.future],
      };
    });
  }, []);


  const redo = useCallback(() => {
    setHistory((prev) => {
      if (prev.future.length === 0) return prev;
      const next = prev.future[0];
      const newFuture = prev.future.slice(1);
      return {
        past: [...prev.past, prev.present],
        present: next,
        future: newFuture,
      };
    });
  }, []);


  const canUndo = history.past.length > 0;
  const canRedo = history.future.length > 0;


  return {
    state: history.present,
    setState,
    undo,
    redo,
    canUndo,
    canRedo,
  };
}

使用示例：

function Editor() {
  const { state, setState, undo, redo, canUndo, canRedo } = useUndoRedo("");


  return (
    <div>
      <textarea value={state} onChange={(e) => setState(e.target.value)} />
      <button onClick={undo} disabled={!canUndo}>
        撤销
      </button>
      <button onClick={redo} disabled={!canRedo}>
        重做
      </button>
    </div>
  );
}