Našumo optimizavimo valdas useTransition React

Našumo optimizavimo valdas useTransition leidžia mums atnaujinti būsenas neužblokuojant vartotojo sąsajos.

Naudodami šį valdą galime priskirti tam tikros būsenos atnaujinimui žemą prioritetą, kas leis kitų būsenų atnaujinimams turėti aukštą prioritetą ir vykti be delsos.

Kaip pavyzdį galima pateikti išskleidžiamo prekių sąrašo filtravimą vartotojui įvedant simbolius į paieškos lauką. Žinoma, pats sąrašas gali būti rodomas su tam tikra delsia, bet mes nenorėtume, kad simboliai įvestų į paieškos lauką su delsia.

Pažiūrėkime, kaip tokiu atveju mums gali padėti valdas useTransition. Tarkime, kad turime pagrindinio komponento kodo dalį. Išanalizuokime ją:

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>
	);
}

Čia matome du kintamuosius skirtus useTransition. Kintamasis isPending turi loginę reikšmę ir rodo ar atnaujinimo procesas baigtas, o startTransition yra funkcija, kuri ir leidžia sumažinti atnaujinimo prioritetą:

const [isPending, startTransition] = useTransition();

Taip pat turime būseną filterTerm, kurioje saugoma įvesta į įvesties lauką išraiška ir funkciją setFilterTerm jos nustatymui:

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

Įvedant simbolius į įvesties lauką kiekvieną kartą iškviečiama funkcija updateFilterHandler, kurioje vyksta būsenos filterTerm atnaujinimas. Būtent čia mes taikome savo valdą useTransition, apgaubdami nustatymo funkciją setFilterTerm į startTransition taip:

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

Taip, mes nustatėme būsenos filterTerm atnaujinimui žemą prioritetą ir mūsų įvesties laukas išliks reaguojantis.

Naudodami kintamąjį isPending mes galime parodyti vartotojui, kad sąrašo atnaujinimas vis dar vyksta. Išveskime šią informaciją po įvesties lauku, kol sąrašas atnaujinamas:

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