javascript / expert
Snippet
Doppel-gepufferte Array-Warteschlange für die gleichzeitige React-Reducer-Verarbeitung
Implementiert ein Array-basiertes Doppelpuffer-Warteschlangenmuster unter Verwendung privater ES-Klassenfelder. Diese Architektur isoliert nebenläufige Aktionen in einem Schreibpuffer, während React-Kontext- oder Reducer-Logik gesammelte Aktionen aus einem getauschten Lesepuffer konsumiert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class DoubleBufferedQueue {#readBuffer = [];#writeBuffer = [];enqueue(item) {this.#writeBuffer.push(item);}swap() {const temp = this.#readBuffer;this.#readBuffer = this.#writeBuffer;this.#writeBuffer = temp;this.#writeBuffer.length = 0;return this.#readBuffer;}process(reducerFn, initialState) {const activeItems = this.swap();return activeItems.reduce(reducerFn, initialState);}}
react
Erklärung
1
#readBuffer = []; #writeBuffer = [];
Kapselt den internen Array-Speicher mithilfe der Syntax für private Klassenfelder.
2
enqueue(item) { this.#writeBuffer.push(item); }
Fügt eingehende Statusaktualisierungen dem isolierten Schreibpuffer hinzu, ohne aktive Lesedaten zu verändern.
3
swap() { ... this.#writeBuffer.length = 0; }
Tauscht Pufferreferenzen sofort aus und leert den neuen Schreibpuffer durch Anpassen der Array-Länge.
4
return activeItems.reduce(reducerFn, initialState);
Faltet die gesammelten Array-Elemente mithilfe von Array.prototype.reduce in ein einzelnes aktualisiertes Zustandsobjekt.