Ytelsesoptimaliserings-hooken useMemo i React

Den første hooken for ytelsesoptimalisering som vi skal se på er useMemo.

Denne hooken hjelper til med å cache resultatene av ressurskrevende operasjoner mellom gjengivelsene av skjermen og kan følgelig hjelpe til med å unngå unødvendige omfattende beregninger. Slik caching kalles også memoization.

La oss se hvordan dette fungerer. La oss opprette en komponent med en knapp og en overskrift h3:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

Og la oss nå gjøre slik at ved klikk på overskriften endres fargen fra oransje til grønn og tilbake. Til å begynne med la oss opprette en state isGreen:

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

La oss legge til en betingelse for fargeendring i style-attributten til overskriften og legge til en klikk-håndterer:

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

La oss også ha en verdi som økes med én ved klikk på knappen vår. La oss opprette en state for den:

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

La oss legge til håndtering av klikk på knappen:

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

La oss også ha en funksjon square som returnerer kvadratet av verdien num. Resultatet av funksjonskallet vil vi lagre i variabelen result:

const result = square(num);

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

La oss vise result i knappens tekst:

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

Resultatet ble som følger: ved klikk på knappen endres verdien num, som deretter opphøyes i andre, og ved klikk på overskriften endres fargen på overskriften.

Vi har en veldig liten komponent, alt fungerer raskt, til tross for at ved klikk på overskriften for å endre fargen, gjengis hele komponenten på nytt, og følgelig skjer alle beregninger knyttet til knappen på nytt, selv om vi ikke berørte den. Og tenk deg hvis beregningene våre var omfattende og alt ble regnet ut på nytt hver gang.

La oss gjøre funksjonen vår litt tyngre, nå vil den tenke litt lenger. På denne måten simulerer vi langvarige beregninger:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Bare gjør ingenting ...
	}
	
	return num * num;
}

Trykk nå på overskriften. Det viser seg at nå, på grunn av den langsomme funksjonen square (og vi berører ikke knappen!), må vi vente en evighet for at overskriften skal skifte farge!

Her kommer useMemo-hooken til unnsetning. For å gjøre dette må vi sende en funksjon som første parameter, som beregner verdien vi ønsker å cache. Denne funksjonen må være ren og ikke ta imot noen parametere. Og som andre parameter - avhengigheter i hakeparenteser, med andre ord, alle de reaktive verdiene som deltar i funksjonens kode. På denne måten vil vi i result skrive en slik konstruksjon:

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

La oss trykke på overskriften igjen. Nå, hvis vi ikke berører knappen med beregningene og ikke endrer state-verdien num på denne måten, blir ingenting regnet ut på nytt, og React viser den cachelagrede verdien i knappen, derfor skifter overskriften vår raskt farge.

Opprett en komponent App, plasser et avsnitt i den. Opprett en state text med startverdi 'react', la state-verdien vises som avsnittets tekst. La det slik at ved klikk på avsnittet, legges det til et utropstegn på slutten av teksten.

Opprett en state til num, med startverdi 0. Plasser i App et avsnitt til. Gjør slik at ved klikk på den økes num med 1.

Og legg til funksjonen triple i App, som tar num som en parameter og returnerer dens tredobbelte verdi. Legg resultatet av funksjonskallet i variabelen result. Vis result som teksten i det andre avsnittet. Klikk etter tur på avsnittene, merk hvor sakte utropstegnene legges til.

Løs situasjonen ved å pakke den langsomme funksjonen triple inn i useMemo.