javascript / expert
Snippet
In-Place-Array-Permutations-Tracking mit TypedArrays in virtuellen React-Grid-Renderern
Durch den Einsatz zusammenhängender Speicherstrukturen mittels JavaScript TypedArray (Int32Array) in React-Refs können Entwickler In-Place-Array-Reindizierungen und Permutationsberechnungen durchführen, ohne bei intensiven Interaktionen temporäre JS-Objekte oder Arrays zu allokieren.
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
23
24
25
26
27
28
import React, { useRef, useCallback } from 'react';export function useArrayPermutationIndex(itemCount) {const indexMapRef = useRef(null);if (indexMapRef.current === null || indexMapRef.current.length !== itemCount) {const buffer = new Int32Array(itemCount);for (let i = 0; i < itemCount; i++) {buffer[i] = i;}indexMapRef.current = buffer;}const swapIndices = useCallback((fromIndex, toIndex) => {const buffer = indexMapRef.current;if (fromIndex < 0 || fromIndex >= buffer.length ||toIndex < 0 || toIndex >= buffer.length) {throw new RangeError('Permutation index out of bounds');}const temp = buffer[fromIndex];buffer[fromIndex] = buffer[toIndex];buffer[toIndex] = temp;}, []);return { indexMap: indexMapRef.current, swapIndices };}
react
Erklärung
1
const indexMapRef = useRef(null);
Speichert die TypedArray-Buffer-Instanz über Renders hinweg, ohne Re-Renders auszulösen.
2
const buffer = new Int32Array(itemCount);
Allokiert einen vorzeichenbehafteten 32-Bit-Integer-Puffer fester Länge in zusammenhängendem Speicher.
3
if (fromIndex < 0 || fromIndex >= buffer.length ...)
Führt eine Bereichsprüfung vor Array-Indexmutations durch, um fehlerhafte Pufferzugriffe zu verhindern.
4
const temp = buffer[fromIndex]; buffer[fromIndex] = buffer[toIndex]; buffer[toIndex] = temp;
Führt eine Tausch-Operation ohne Speicherallokation direkt im TypedArray-Puffer aus.
5
return { indexMap: indexMapRef.current, swapIndices };
Gibt TypedArray-Referenz und Mutations-Callback für performantes Rendering im virtuellen Grid zurück.