Našumo optimizavimo veltis useMemo React

Pirmasis našumo optimizavimo veltis, kurį mes nagrinėsime - tai useMemo.

Šis veltis padeda talpinti išteklių reikalaujančių operacijų rezultatus tarp ekrano perpiešimo momentų ir atitinkamai gali padėti išvengti nereikalingų sudėtingų skaičiavimų. Toks talpinimas dar vadinamas memorizacija.

Pažiūrėkime, kaip tai veikia. Sukurkime komponentą su mygtuku ir antrašte h3:

return (
	<div>
		<h3>Tekstas</h3>
		<button>spustelėti</button>
	</div>
);

O dabar padarykime taip, kad paspaudus ant antraštės jos spalva keistųsi iš oranžinės į žalią ir atgal. Pirmiausia sukurkime būseną isGreen:

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

Pridėkime į atributą style antraštės sąlygą spalvos keitimui ir uždekime paspaudimo apdorojimą:

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

Tegul mes taip pat turime kokią nors reikšmę, kuri didėtų paspaudus mūsų mygtuką vienetu. Sukurkime jai būseną:

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

Pridėkime paspaudimo ant mygtuko apdorojimą:

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

Tegul taip pat mes turime kokią nors funkciją square, kuri grąžins reikšmės num kvadratą. Funkcijos iškvietimo rezultatą mes įrašysime į kintamąjį result:

const result = square(num);

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

Atvaizduokime result mygtuko tekste:

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

Dėl to mes gavome taip: paspaudus ant mygtuko keičiasi reikšmė num, kuri tada pakeliama į kvadratą, o paspaudus ant antraštės keičiasi antraštės spalva.

Mes turime labai mažą komponentą, viskas veikia greitai, nepaisant to, kad paspaudus ant antraštės jos spalvai pakeisti visas komponentas perpiešiamas iš naujo, atitinkamai iš naujo atliekami ir skaičiavimai, kurie yra susieti su mygtuku, tai net taip, kad mes jo nelietėme. O dabar įsivaizduokite, jei mūsų skaičiavimai būtų sudėtingi ir visi būtų perskaičiuojami iš naujo kiekvieną kartą.

Šiek tiek apsunkinkime mūsų funkciją, dabar ji truputį ilgiau mąstys. Taigi mes imituosime ilgus skaičiavimus:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Tiesiog nieko nedarykite ...
	}
	
	return num * num;
}

Dabar paspauskite ant antraštės. Pasirodo, kad dabar dėl lėtai veikiančios funkcijos square (o mygtuko mes neliečiame) mes turime laukti visa amžinybę, kad antraštei pasikeistų spalva!

Čia mums į pagalbą ir ateis veltis useMemo. Tam mums reikia pirmuoju parametru perduoti funkciją, apskaičiuojančią reikšmę, kurią mes norime talpinti, ši funkcija turi būti gryna ir ne priimti jokių parametrų. O antruoju parametru - priklausomybes laužtiniuose skliaustuose, kitaip tariant, visas reaktyvias reikšmes, kurios dalyvauja funkcijos kode. Taigi, į result mes dabar įrašysime tokią konstrukciją:

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

Vėl paspauskime ant antraštės. Dabar, jei mes neliečiame mygtuko su skaičiavimais ir taip nekeičiame būsenos reikšmės num, tai niekas neperskaičiuojama, ir React atvaizduoja talpinamą reikšmę mygtuke, todėl mūsų antraštė greitai pakeičia savo spalvą.

Sukurkite komponentą App, patalpinkite jame pastraipą. Sukurkite būseną text su pradine reikšme 'react', tegul būsenos reikšmė atvaizduojama kaip pastraipos tekstas. Tegul paspaudus ant pastraipos, jos teksto pabaigoje pridedamas šauktukas.

Sukurkite dar vieną būseną num, su pradine reikšme 0. Patalpinkite App dar vieną pastraipą. Padarykite taip, kad paspaudus ant jos num padidėtų 1.

O dabar pridėkite į App funkciją triple, kuri kaip parametrą priima num ir grąžina jos trigubą reikšmę. Įdėkite funkcijos iškvietimo rezultatą į kintamąjį result. Atvaizduokite result kaip antrosios pastraipos tekstą. Paspaudinėkite paeiliui ant pastraipų, pažymėkite, kaip lėtai pridedami šauktukai.

Ištaisykite situaciją, apvynioję lėtą funkciją triple į useMemo.