React-daky performans optimizasiýa gurlagynyň useMemo çeňňegi

Biz gözden geçirerlik ilkinji performans optimizasiýa gurlagy - bu useMemo.

Bu gurlag ekran täzeden çyzylma pursatlar arasynda resurslaryň sarp ediji amallarynyň netijelerini keşirlemäge kömek edýär we şonuň ýaly-da artykmaç uly hasaplamalaryň öňüni alyp biler. Beýle keşirleme ýene-de memoirleme diýlip atlandyrylýar.

Geliň, bu nähili işleýändigine göz aýlalyň. Gel-de düwme we h3 sözbaşy bilen komponent döredeliň:

return (
	<div>
		<h3>Tekst</h3>
		<button>bas</button>
	</div>
);

Indi bolsa, başlyga basylanda onuň reňki mämişiden ýaşyl reňke we yzyna öwrülsin. Başlangyç üçin isGreen ýagdaýyny düzeliň:

const [isGreen, setIsGreen] = useState(false);

style atributyna başlygyň reňkini üýtgetmek üçin şert goşuň we basmak üçin işleýjini baglaň:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Tekst</h3>

Bizde hemme bolsa, düwmemize basylanda bir birlige köpelýän käbir baha bolsun. Onuň üçin ýagdaý düzeliň:

const [num, setNum] = useState(0);

Düwmä basmagy işleşdiriň:

<button onClick={() => setNum(num + 1)}>
	basmaklar
</button>

Bizde hem square diýen bir funksiýa bolsun, num bahasynyň kwadratyny yzyna gaýtarar. Funksiýany çagyrmagyň netijesi result üýtgeýjisine ýazylar:

const result = square(num);

function square(num) {
	return num * num;
}

result-ny düwmäniň tekstinde görkezeliň:

<button onClick={() => setNum(num + 1)}>
	basmaklar: {result}
</button>

Netijede, bizde şuňa meňzeş boldy: düwmä basylanda num bahasy üýtgeýär, soňra kwadrata göterilýär, we başlyga basylanda başlygyň reňki üýtgeýär.

Bizde ýönekeý komponent, hemme zady çalt işleýär, başlygyň reňkini üýtgetmek üçin basanymyzda hemme komponent täzeden çyzylýar, şonuň ýaly-da düwme bilen baglanyşykly hasaplamalar täzeden amala aşyrylýar, bu bolsa biz oňa ýetmedik bolsak hem. A indi bolsa, göz öňüne getiriň, eger bizde hasaplamalar uly we hemme gezek täzeden hasaplanyp geçilende.

Geliň, funksiýamyzy biraz agyrlaşdyralyň, indi ol birneme has köp pikir eder. Şeýlelik bilen uzak dowam edýän hasaplamalary ýüze çykararys:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Diňe hiç zat etme ...
	}
	
	return num * num;
}

Indi başlyga basyň. Netijede, indi square funksiýasynyň uzak işlemegi sebäpli (düwmä bolsa biz ýetirýäris) biz başlygyň reňkini üýtgetmek üçin dowamly gözlemeli!

Bu ýerde biz kömegine useMemo gurlagy gelýär. Munuň üçin, ilkinji parametr hökmünde biz keşirlemek isleýän bahany hasaplaýan funksiýany bermeli, bu funksiýa arassa bolmaly we hiç bir parametr kabul etmeli. Ikinji parametr hökmünde - kwadrat ýaýlarda baglylyklar, beýle söz bilen, hemme reaksiýaly bahalar, funksiýanyň kodunda gatnaşýar. Şeýlelik bilen, result-da indi biz şeýle gurluş ýazyarys:

const result = useMemo(() => square(num), [num]);

Ýene başlyga basalyň. Indi, eger biz hasaplamaly düwmä ýetirýänok bolsaň we num ýagdaýynyň bahasyny üýtgetmesek , onda hiç zat täzeden hasaplanmaýar, we React keşirlenen bahany düwmäde görkezýär, şonuň üçin başlygy çalt reňkini üýtgedýär.

App komponentini dörediň, ýerleşdiriň onda abzas. text ýagdaýyny düzeliň başlangyç bahasy 'react' bilen, ýagdaýyň bahasy görkezilsin abzasyň tekstinde. Abzasa basylanda, oňa tekstiniň ahyryna ünleme belgisi goşulsyn.

num ýene bir ýagdaý düzeliň, bilen başlangyç bahasy 0. Ýerleşdiriň App-da ýene bir abzas. Şeýle ediň, oňa basylanda num 1 köpelýändi.

Indi bolsa App-a funksiýa goşuň triple, parametr hökmünde num kabul edýär we onuň üç ese köpeltmeli bahasyny yzyna gaýtarýar. Funksiýany çagyrmagyň netijesini result üýtgeýjisine salyň. Görkeziň result ikinji abzasyň tekstinde. Arkaýyn abzaslara basyň, ünleme belgileri nädip haýal goşulýandygyny belgiliň.

Ýagşy ýagdaýy düzediň, haýal funksiýa triple-ny useMemo-a öwüriň.