React-daky useTransition öndürijilik gowulandyryş gogy

Öndürijiligi gowulandyryş gogy useTransition bizä grafik interfeýsi bloklamazdan ýagdaýlary täzelemäge mümkinçilik berýär.

Bu gogyň kömegi bilen biz käbir ýagdaýy täzelemäge pes prioritet belgip bileris, bu bolsa beýleki ýagdaýlaryň täzelenmesiniň ýokary prioritetde bolup, gijikmesiz ýerine ýetirilmegine ýol berer.

Mysal üçin, ulanyjynyň gözleg meýdançasyna nyşan girizen wagtynda harytlaryň açylýan sanawyny süzgüçlemek alyp bolýar. Elbetde, sanawyň özi käbir gijikme bilen görkezilip bilner, ýöne biz gözleg meýdançasyna nyşanlaryň gijikme bilen girizilmegini islemeýäris.

Geliň, ýagdaýlarda gogy useTransition bize nädip kömek edip biljekdigine ser edeliň. Esasy komponentiň bir bölegi bar diýeliň. Geliň ony analiz edeliň:

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

Bu ýerde biz useTransition üçin iki üýtgeýjäni görýäris. isPending üýtgeýjisi bul maşyny saklaýar we täzelenme prosesiň gutarýandygyny görkezýär, startTransition bolsa täzelenme prioritetini peseltmäge mümkinçilik berýän funksiýadyr:

const [isPending, startTransition] = useTransition();

Şeýle-de bizde filterTerm ýagdaýy bar, ol gözleg meýdançasyna girizilýän ifadäni saklaýar we ony sazlamak üçin setFilterTerm funksiýasy bar:

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

Giris meýdançasyna nyşan girizilende her gezek updateFilterHandler funksiýasy çagyrylýar, onda filterTerm täzelenýär. Diňe şu ýerde biz useTransition gogymyzy ulanýarys, setFilterTerm ornatma funksiýasyny aşakdaky ýaly startTransition içine alýarys:

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

Şeýlelik bilen, biz filterTerm ýagdaýyny täzelemek üçin pes prioritet belgledik we giris meýdanymyz çalt jogap berýän bolup galar.

isPending üýtgeýjisiniň kömegi bilen biz ulanyja sanawyň täzelenýändigini görkezip bileris. Sanaw täzelenýärkä, bu maglumaty giris meýdanynyň aşagynda görkezeliň:

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