React-ի useDeferredValue Արդյունավետության օպտիմիզացիայի հուք

useDeferredValue արդյունավետության օպտիմիզացիայի հուքը, ճիշտ ինչպես useTransition-ը, օգնում է արագացնել գրաֆիկական ինտերֆեյսի աշխատանքը, սակայն դա անում է մի փոքր այլ կերպ։

Նայեք նախորդ դասին և տեսեք, թե ինչպես useTransition-ի դեպքում մենք պարուրում էինք setFilterTerm թարմացման ֆունկցիան։ Այսպիսով, սթեյթը թարմացնող կոդը միշտ չէ, որ հասանելի է լինում։ Այն կարող է թաքնված լինել, օրինակ, ձեր միացրած գրադարանում։ Այս դեպքում մենք կարող ենք օգտագործել useDeferredValue հուկը։ Այդ ժամանակ մենք պետք է պարուրենք կամ հենց սթեյթը, կամ այդ սթեյթի միջոցով հաշվարկված արդյունքը՝ դրանով իսկ նվազեցնելով դրա առաջնահերթությունը։

Եկեք վերլուծենք ProductList երեխա կոմպոնենտի կոդի հետևյալ հատվածը.

import {useDeferredValue} from 'react'

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

Ուշադրություն դարձրեք, որ այստեղ մենք useDeferredValue-ով պարուրեցինք հենց products փոփոխականը, որը մենք վերցրեցինք կոմպոնենտի պրոպսերից։ Ապա արդյունքը գրեցինք deferredProducts-ի մեջ, որի հետ էլ հաջորդում կաշխատենք.

const deferredProducts = useDeferredValue(products);

Այժմ, եթե գլխավոր կոմպոնենտի կոդի այն հատվածում, որը մենք դիտարկեցինք նախորդ դասին, հանենք տողը.

const [isPending, startTransition] = useTransition();

Եվ isPending-ի օգտագործման տողը.

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

Եվ նաև հանենք պարույրը setFilterTerm ֆունկցիայից, ապա կստանանք նույն արդյունքը, ինչ նախորդ դասում.

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