Huk za optimizacijo zmogljivosti useDeferredValue v Reactu

Huk za optimizacijo zmogljivosti useDeferredValue, tako kot useTransition, pomaga pospešiti delo grafičnega vmesnika, vendar to naredi nekoliko drugače.

Oglejte si prejšnjo lekcijo in poglejte, kako smo v primeru z useTransition ovili funkcijo posodabljanja setFilterTerm. Torej, koda za posodobitev stanja ni vedno na voljo. Lahko je skrita, na primer v knjižnici, ki ste jo priklopili. V tem primeru lahko uporabimo huk useDeferredValue. Takrat moramo oviti ali samo stanje, ali rezultat, izračunan s tem stanjem, s čimer zmanjšamo njegovo prioriteto.

Analizirajmo naslednji del kode podrejenega komponenta ProductList:

import {useDeferredValue} from 'react'

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

Upoštevajte, da smo tukaj ovili v useDeferredValue samo spremenljivko products, ki smo jo vzeli iz lastnosti komponenta. Nato smo zapisali rezultat v deferredProducts, s katero bomo delali naprej:

const deferredProducts = useDeferredValue(products);

Zdaj, če v delu kode glavnega komponenta, ki smo ga obravnavali v prejšnji lekciji, odstranimo vrstico:

const [isPending, startTransition] = useTransition();

In vrstico z uporabo isPending:

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

In odstranimo ovoj s funkcije setFilterTerm, potem dobimo enak rezultat kot v prejšnji lekciji:

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