React-ի useTransition կատարողականության օպտիմիզացիայի հուք

useTransition կատարողականության օպտիմիզացիայի հուքը մեզ թույլ է տալիս թարմացնել սթեյթերը՝ առանց գրաֆիկական ինտերֆեյսը բլոկելու:

Այս հuk-ի օգնությամբ մենք կարող ենք որևէ սթեյթի թարմացմանը նշանակել ցածր առաջնահերթություն, ինչը կթույլատրի այլ սթեյթների թարմացումներին ունենալ բարձր առաջնահերթություն և կատարվել առանց ուշացման:

Որպես օրինակ կարելի է բերել ապրանքների բացվող ցուցակի ֆիլտրումը՝ օգտագործողի կողմից դաշտում նիշեր մուտքագրելու ժամանակ: Իհարկե, ցուցակը կարող է ցուցադրվել որոշակի ուշացմամբ, բայց մենք չէինք ցանկանա, որ նիշերը դաշտում մուտքագրվեն ուշացմամբ:

Եկեք տեսնենք, թե ինչպես կարող է օգնել մեզ useTransition հուքը նման դեպքերում: Ենթադրենք, ունենք հիմնական կոմպոնենտի կոդի մի հատված: Եկեք վերլուծենք այն.

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Այստեղ մենք տեսնում ենք երկու փոփոխական useTransition-ի համար: isPending փոփոխականը պարունակում է բուլյան արժեք և ցույց է տալիս արդյոք թարմացման պրոցեսն ավարտված է, իսկ startTransition ֆունկցիան այն ֆունկցիան է, որ և թույլ է տալիս նվազեցնել թարմացման առաջնահերթությունը.

const [isPending, startTransition] = useTransition();

Մենք նաև ունենք filterTerm սթեյթ, որտեղ պահվում է դաշտում մուտքագրվող արտահայտությունը և setFilterTerm ֆունկցիան այն սահմանելու համար.

const [filterTerm, setFilterTerm] = useState('');

Դաշտում նիշեր մուտքագրելիս ամեն անգամ կանչվում է updateFilterHandler ֆունկցիան, որտեղ տեղի է ունենում filterTerm-ի թարմացում: Հենց այստեղ ենք մենք կիրառում մեր useTransition հուքը՝ setFilterTerm սահմանման ֆունկցիան փաթաթելով startTransition-ի մեջ հետևյալ կերպ.

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

Այսպիսով, մենք սահմանեցինք filterTerm սթեյթի թարմացման համար ցածր առաջնահերթություն և մեր մուտքագրման դաշտը կմնա արձագանքող:

isPending փոփոխականի օգնությամբ մենք կարող ենք ցույց տալ օգտագործողին, որ ցուցակի թարմացումը դեռ ընթացքի մեջ է: Եկեք ցույց տանք այս տեղեկությունը մուտքագրման դաշտի տակ, մինչ ցուցակը թարմացվում է.

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>updating ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);