Performance-Optimierung Hook useDeferredValue in React

Der Performance-Optimierung Hook useDeferredValue, genauso wie useTransition, hilft, die Arbeit der grafischen Oberfläche zu beschleunigen, tut dies aber auf etwas andere Weise.

Werfen Sie einen Blick auf die letzte Lektion und sehen Sie sich an, wie wir im Fall von useTransition die Update-Funktion setFilterTerm umschlossen haben. Nun, der Code zum Aktualisieren des States ist nicht immer verfügbar. Er kann beispielsweise in einer Bibliothek versteckt sein, die Sie eingebunden haben. In diesem Fall können wir auf den Hook useDeferredValue zurückgreifen. Dann müssen wir entweder den State selbst oder das Ergebnis, das mit Hilfe dieses States berechnet wird, umschließen, und dadurch seine Priorität verringern.

Lassen Sie uns den folgenden Codeausschnitt der Kindkomponente ProductList analysieren:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Beachten Sie, dass wir hier die Variable products selbst in useDeferredValue eingewickelt haben, die wir aus den Props der Komponente entnommen haben. Dann haben wir das Ergebnis in deferredProducts gespeichert, mit der wir weiterarbeiten werden:

const deferredProducts = useDeferredValue(products);

Wenn wir nun im Codeausschnitt der Hauptkomponente, den wir in der letzten Lektion betrachtet haben, die Zeile entfernen:

const [isPending, startTransition] = useTransition();

Und die Zeile mit der Verwendung von isPending:

{isPending && <p>updating ...</p>}

Und außerdem die Umhüllung der Funktion setFilterTerm entfernen, dann erhalten wir das gleiche Ergebnis wie in der letzten Lektion:

function updateFilterHandler(event) {
	setFilterTerm(event.target.value);
}