javascript / expert
Snippet
Zero-Copy Binaerrahmen-Dekodierung mit ArrayBuffer-Slices fuer React Render-Schleifen
Parst strukturierte binäre Datenströme mit DataView und Uint8Array-Subarray-Offsets auf rohen ArrayBuffer-Objekten ohne Kopiervorgang und speichert extrahierte Framedaten sicher im React-Zustand.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { useState, useCallback } from 'react';function parseHeader(buffer) {const view = new DataView(buffer);const magic = view.getUint16(0, false);const payloadSize = view.getUint32(2, false);return { magic, payloadSize };}export function useBinaryStreamDecoder() {const [frames, setFrames] = useState([]);const processChunk = useCallback((arrayBuffer) => {const { magic, payloadSize } = parseHeader(arrayBuffer);if (magic !== 0x4147) return;const payloadSlice = new Uint8Array(arrayBuffer, 6, payloadSize);setFrames(prev => [...prev, Array.from(payloadSlice)]);}, []);return { frames, processChunk };}
react
Erklärung
1
const view = new DataView(buffer);
Erstellt eine DataView zum Auslesen von Werten unabhängig von der Endianness der Plattform.
2
const payloadSlice = new Uint8Array(arrayBuffer, 6, payloadSize);
Erzeugt ein kopierfreies TypedArray-Fenster über den bestehenden ArrayBuffer ab Offset 6.
3
setFrames(prev => [...prev, Array.from(payloadSlice)]);
Konvertiert das TypedArray-Slice in ein Standard-Array für die Ablage im React-Zustand.