javascript / expert
Snippet
Optimierung der Responsivität mit useTransition
useTransition ermöglicht es, bestimmte Statusaktualisierungen als 'Transitions' zu markieren, was bedeutet, dass sie nicht dringend sind. Dadurch kann React dringende Updates (wie das Tippen in einem Eingabefeld) gegenüber teuren Berechnungen priorisieren und die Schnittstelle flüssig halten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SearchComponent() {const [isPending, startTransition] = useTransition();const [filter, setFilter] = useState('');const [results, setResults] = useState([]);const handleSearch = (e) => {const value = e.target.value;// Urgent update: input field must be responsivesetFilter(value);// Non-urgent: computation/rendering results can waitstartTransition(() => {const filtered = largeDataset.filter(i => i.includes(value));setResults(filtered);});};return <input value={filter} onChange={handleSearch} />;}
react
Erklärung
1
const [isPending, startTransition] = useTransition();
Gibt ein Flag für den Status und eine Funktion zum Starten der Transition zurück.
2
startTransition(() => { ... });
Umschließt ein Status-Update, um es für den Concurrent-Renderer als niedrig-priorisiert zu markieren.
3
isPending
Ein Boolean, der anzeigt, ob die Transition noch im Hintergrund verarbeitet wird.