使用命令模式实现 undo、redo 功能

function Count() {
  const manager = useMemo(() => new UndoRedoManager(), [])

  const [pos, setPos] = useState({ x: 10, y: 10 })

  function move() {
    const oldPos = pos
    const newPos = { x: Math.random() * 150, y: Math.random() * 150 }
    const cmd = {
      // 注意这里每次 redo 也会执行
      execute: () => {
        setPos(newPos)
      },
      unexecute: () => {
        setPos(oldPos)
      },
    }
    manager.execute(cmd)
  }

  function undo() {
    manager.undo()
  }

  function redo() {
    manager.redo()
  }

  return (
    <>
      <div style={{ position: 'relative', border: '1px solid royalblue', width: 200, height: 200 }}>
        <div
          style={{
            position: 'absolute',
            left: pos.x,
            top: pos.y,
            width: 50,
            height: 50,
            background: 'royalblue',
            transition: '.2s',
          }}
        />
      </div>
      <br />
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
        <button onClick={move}>move</button>
        <button onClick={undo}>undo</button>
        <button onClick={redo}>redo</button>
      </div>
    </>
  )
}