Die prestasie-optimalisering hook useTransition in React

Die prestasie-optimalisering hook useTransition laat ons toe om toestand (state) by te werk sonder om die grafiese gebruikerskoppelvlak te blokkeer.

Met hierdie hook kan ons 'n lae prioriteit aan die bywerking van 'n toestand toewys, wat sal toelaat dat die bywerking van ander toestande 'n hoë prioriteit het en sonder vertragings uitgevoer kan word.

As voorbeeld kan die filtering van 'n uitklaplys van produkte genoem word tydens die invoer van simbole deur die gebruiker in die soekveld. Die lys self mag natuurlik met 'n sekere vertraging vertoon word, maar ons wil nie hê dat die simbole met vertraging in die soekveld ingevoer moet word nie.

Kom ons kyk hoe die hook useTransition in sulke gevalle kan help. Veronderstel ons het 'n stuk kode van die hoof- komponent. Kom ons analiseer dit:

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

Hier sien ons twee veranderlikes vir useTransition. Die veranderlike isPending bevat 'n Boole-waarde en wys of die bywerkingsproses voltooi is, en startTransition is die funksie wat die prioriteit van die bywerking kan verlaag:

const [isPending, startTransition] = useTransition();

Ons het ook die toestand filterTerm, waarin die uitdrukking wat in die invoerveld getik word gestoor word, en die funksie setFilterTerm om dit in te stel:

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

Wanneer simbole in die invoer getik word, word die funksie updateFilterHandler elke keer opgeroep, waar die bywerking van filterTerm plaasvind. Dit is hier waar ons ons hook useTransition toepas, deur die instel-funksie setFilterTerm in startTransition in te sluit soos volg:

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

Sodoende het ons vir die bywerking van die toestand filterTerm 'n lae prioriteit ingestel en sal ons invoerveld reageerbaar bly.

Met behulp van die veranderlike isPending kan ons aan die gebruiker wys dat die bywerking van die lys nog aan die gang is. Laat ons hierdie inligting onder die invoerveld vertoon terwyl die lys besig is om by te werk:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>tans besig om by te werk ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);