Naudojimo atidėtos vertės (useDeferredValue) našumo optimizavimo kabliukas React

Naudojimo atidėtos vertės (<useDeferredValue>) našumo optimizavimo kabliukas, taip pat kaip ir useTransition, padeda pagreitinti grafinės sąsajos veikimą, bet tai daro šiek tiek kitaip.

Pažvelkite į praeitą pamoką ir pamatysite, kaip su useTransition mes apgaubėme atnaujinimo funkciją setFilterTerm. Taigi, būsenos atnaujinimo kodas gali būti ne visada prieinamas. Jis gali būti paslėptas, pavyzdžiui, bibliotekoje, kurią prijungėte. Tokiu atveju mes galime pasinaudoti kabluku useDeferredValue. Tada mums reikia apgaubti arba pačią būseną, arba rezultatą, apskaičiuotą naudojant šią būseną, taip sumažinant jos pirmumą.

Išanalizuokime šį vaikiniio komponento ProductList kodo fragmentą:

import {useDeferredValue} from 'react'

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

Atkreipkite dėmesį, kad čia mes apgaubėme useDeferredValue pačią kintamąją products, kurią paėmėme iš komponento propsų. Tada rezultatą įrašėme į deferredProducts, su kuria ir dirbsime toliau:

const deferredProducts = useDeferredValue(products);

Dabar, jei pagrindinio komponento kodo fragmente, kurį nagrinėjome praėjoje pamokoje, pašalinsime eilutę:

const [isPending, startTransition] = useTransition();

Ir eilutę su isPending naudojimu:

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

Taip pat nuimti apgaubimą nuo funkcijos setFilterTerm, tada gausime tą patį rezultatą, kaip ir praėjoje pamokoje:

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