Veiktspējas optimizācijas hoks useTransition React

Veiktspējas optimizācijas hoks useTransition ļauj mums atjaunināt stāvokļus bez grafiskās saskarnes bloķēšanas.

Ar šī hoka palīdzību mēs varam iestatīt kāda stāvokļa atjaunināšanai zemu prioritāti, kas ļaus citiem stāvokļu atjauninājumiem būt ar augstu prioritāti un izpildīties bez aizkavēm.

Kā piemēru var minēt nolaižamā preču saraksta filtrēšanu lietotājam ievadot simbolus meklēšanas laukā. Protams, pats saraksts var tikt rādīts ar zināmu aizkavi, bet mēs negribētu, ka simboli meklēšanas laukā tiktu ievadīti ar aizkavi.

Paskatīsimies, kā šādos gadījumos mums var palīdzēt hoks useTransition. Pieņemsim, ka mums ir galvenā komponenta koda daļa. Analizēsim to:

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

Šeit mēs redzam divus mainīgos useTransition. Mainīgais isPending satur boolean vērtību un parāda, vai atjaunināšanas process ir pabeigts, bet startTransition ir funkcija, kas ļauj pazemināt atjaunināšanas prioritāti:

const [isPending, startTransition] = useTransition();

Mums ir arī stāvoklis filterTerm, kurā tiek glabāta ievadītā izteiksme un funkcija setFilterTerm tā iestatīšanai:

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

Ievadot simbolus ievades laukā, mums katru reizi tiek izsaukta funkcija updateFilterHandler, kurā notiek filterTerm atjaunināšana. Tieši šeit mēs izmantojam savu hoku useTransition, ietverot iestatīšanas funkciju setFilterTerm startTransition šādā veidā:

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

Tādējādi mēs esam iestatījuši stāvokļa filterTerm atjaunināšanai zemu prioritāti un mūsu ievades laukam paliks atsaucīgums.

Izmantojot mainīgo isPending, mēs varam parādīt lietotājam, ka saraksta atjaunināšana vēl notiek. Parādīsim šo informāciju zem ievades lauka, kamēr saraksts tiek atjaunināts:

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