javascript / expert
Snippet
Nicht-blockierende UI-Übergänge mit useTransition
useTransition erlaubt es, Zustandsaktualisierungen als 'Transitions' zu markieren. Dies teilt React mit, dass diese unterbrochen oder verzögert werden können, wenn ein dringenderes Update (wie Tippen) eintritt. So bleibt der Haupt-Thread auch bei rechenintensiven Rendering-Aufgaben reaktionsfähig.
snippet.js
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
import { useState, useTransition } from 'react';function FilterableList({ items }) {const [isPending, startTransition] = useTransition();const [filter, setFilter] = useState('');const handleChange = (e) => {const value = e.target.value;// Urgent: Update the input field immediatelysetFilter(value);// Non-urgent: Defer the heavy filtering logicstartTransition(() => {// Imagine expensive computation hereperformHeavyFiltering(value);});};return (<div style={{ opacity: isPending ? 0.5 : 1 }}><input type="text" onChange={handleChange} />{isPending && <span>Processing...</span>}</div>);}
react
Erklärung
1
const [isPending, startTransition] = useTransition();
isPending zeigt an, ob der Übergang noch aktiv ist; startTransition umschließt das Update mit niedriger Priorität.
2
startTransition(() => { ... });
Teilt React mit, dass der Code in diesem Callback eine Hintergrundaufgabe ist, die die UI nicht blockieren soll.
3
opacity: isPending ? 0.5 : 1
Gibt dem Benutzer visuelles Feedback, während das Hintergrund-Update verarbeitet wird.