javascript / expert
Snippet
Off-Main-Thread-Berechnungs-Hook
Für rechenintensive Aufgaben (z. B. Bildverarbeitung oder komplexe Datenfilterung) ist das Auslagern der Arbeit in einen Web Worker entscheidend, um den UI-Thread reaktionsfähig zu halten. Dieser Hook kapselt den Worker-Lebenszyklus im Effekt-System von React.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
function useWorker(workerScript, inputData) {const [result, setResult] = useState(null);useEffect(() => {const worker = new Worker(workerScript);worker.postMessage(inputData);worker.onmessage = (e) => setResult(e.data);return () => worker.terminate();}, [workerScript, JSON.stringify(inputData)]);return result;}
react
Erklärung
1
const worker = new Worker(workerScript);
Initialisiert einen neuen Hintergrund-Thread für schwere Berechnungen.
2
return () => worker.terminate();
Aufräumfunktion zur Vermeidung von Speicherlecks durch Beenden des Workers beim Unmounten.