javascript / expert
Snippet
Das Command Pattern für Undo/Redo-Logik
Die Implementierung von Undo/Redo erfordert die Verwaltung einer linearen Historie von Status-Snapshots. Indem jede Statusänderung als 'Befehl' behandelt wird, der einem Stapel hinzugefügt wird, können Sie die Historie mithilfe eines Pointers durchlaufen. Dieses Pattern ist für komplexe Editoren und Werkzeuge unerlässlich.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const useHistory = (initialState) => {const [state, setState] = useState(initialState);const [history, setHistory] = useState([initialState]);const [pointer, setPointer] = useState(0);const set = (next) => {const newHistory = history.slice(0, pointer + 1);newHistory.push(next);setHistory(newHistory);setPointer(newHistory.length - 1);setState(next);};const undo = () => {if (pointer > 0) {setPointer(p => p - 1);setState(history[pointer - 1]);}};return { state, set, undo };};
react
Erklärung
1
const [history, setHistory] = useState([initialState]);
Der Stapel, der alle historischen Versionen des Status enthält.
2
history.slice(0, pointer + 1);
Löscht die zukünftige Historie, wenn nach einem Undo eine neue Aktion ausgeführt wird.
3
setState(history[pointer - 1]);
Versetzt den aktiven Status zurück auf einen vorherigen Snapshot im History-Array.