Jõudluse optimeerimise konks useMemo Reactis

Esimene jõudluse optimeerimise konks, mida me vaatleme, on useMemo.

See konks aitab vahemällu salvestada ressursimahukate operatsioonide tulemusi ekraani ümberjoonistamise hetkedel ja seega aitab vältida liigseid mahukaid arvutusi. Sellist vahemällu salvestamist nimetatakse ka memoizatsiooniks.

Vaatame, kuidas see töötab. Loome komponendi nupuga ja pealkirjaga h3:

return (
	<div>
		<h3>Tekst</h3>
		<button>klõpsa</button>
	</div>
);

Ja nüüd teeme nii, et pealkirjale klõpsates muudaks selle värvi oranžist roheliseks ja tagasi. Alustuseks loome oleku isGreen:

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

Lisame atribuuti style pealkirjale tingimuse värvi muutmiseks ja lisame klõpsu töötleja:

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

Olgu meil ka mingi väärtus, mis suureneb meie nupule klõpsates ühe võrra. Loome selle jaoks oleku:

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

Lisame nupule klõpsamise töötlemise:

<button onClick={() => setNum(num + 1)}>
	klõpsud
</button>

Olgu meil ka mingi funktsioon square, mis tagastab väärtuse num ruudu. Funktsiooni käivitamise tulemuse paneme muutujasse result:

const result = square(num);

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

Kuvame result nupu tekstis:

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

Tulemuseks saime järgmise: nupule klõpsates muutub väärtus num, mis seejärel tõstetakse ruutu, ja pealkirjale klõpsates muutub pealkirja värv.

Meil on väga väike komponent, kõik töötab kiiresti, hoolimata asjaolust, et pealkirjale klõpsates selle värvi muutmiseks joonistatakse kogu komponent uuesti, seega toimuvad uuesti ka arvutused, mis on seotud nupuga, isegi siis kui me seda ei puudutanud. Ja nüüd kujutage ette, kui meie arvutused oleksid mahukad ja kõik arvutataks uuesti iga kord.

Teeme oma funktsiooni natuke raskemaks, nüüd see mõtleb veidi kauem. Nii me simuleerime pikki arvutusi:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Lihtsalt ei tee midagi ...
	}
	
	return num * num;
}

Klõpsake nüüd pealkirjal. Selgub, et nüüd pika funktsiooni töö tõttu square (aga nuppu me ju ei puuduta) peame terve igaviku ootama, et pealkirjal värvi muutuks!

Siin tulebki meile appi konks useMemo. Selleks peame esimeseks parameetriks edastama funktsiooni, mis arvutab väärtuse, mida tahame vahemällu hoida, see funktsioon peab olema puhas ja mitte võtma ühtegi parameetrit. Ja teiseks parameetriks - sõltuvused nurksulgudes , teisisõnu kõik reaktiivsed väärtused, mis osalevad funktsiooni koodis. Seega kirjutame result me nüüd sellise konstruktsiooni:

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

Klõpsame uuesti pealkirjal. Nüüd, kui me ei puuduta arvutustega nuppu ega muuda seeläbi oleku väärtust num, siis midagi ei arvutata uuesti, ja React kuvab vahemällu salvestatud väärtuse nupus, seega meie pealkiri muudab oma värvi kiiresti.

Looge komponent App, asetage sinna lõik. Looge olek text algväärtusega 'react', laske oleku väärtust kuvatakse lõigu tekstina. Laske lõigule klõpsates lisatakse selle teksti lõppu hüüumärk.

Looge veel üks olek num, algväärtusega 0. Asetage App veel üks lõik. Tehke nii, et sellele klõpsates num suureneks 1 võrra.

Ja nüüd lisage App funktsioon triple, mis parameetrina võtab num ja tagastab selle kolmekordse väärtuse. Pange funktsiooni käivitamise tulemus muutujasse result. Kuvage result teise lõigu tekstina. Klõpsake kordamööda lõikudele, märkige, kui aeglaselt lisatakse hüüumärke.

Parandage olukorda, mähkides aeglase funktsiooni triple useMemo sisse.