Suorituskyvyn optimoinnin hook useMemo Reactissa

Ensimmäinen suorituskyvyn optimointiin tarkoitettu hook, jota tarkastelemme - on useMemo.

Tämä hook auttaa välimuistamaan resursoita vievien operaatioiden tulokset näytön uudelleenpiirtojen välillä ja voi siten auttaa välttämään tarpeettomia volyymiltaan suuria laskentoja. Tällaista välimuistamista kutsutaan myös memoisaatioksi.

Katsotaan, kuinka se toimii. Luodaan komponentti painikkeella ja otsikolla h3:

return (
	<div>
		<h3>Teksti</h3>
		<button>klikkaa</button>
	</div>
);

Tehdään nyt niin, että otsikkoa klikkaamalla sen väri muuttuu oranssista vihreäksi ja takaisin. Aluksi luodaan tila isGreen:

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

Lisätään otsikon style-attribuuttiin ehto otsikon värin muuttamiseksi ja lisätään klikkauskäsittelijä:

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

Olkoon meillä myös jokin arvo, joka kasvaa painiketta klikatessa yhdellä. Luodaan sille tila:

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

Lisätään klikkauksen käsittely painikkeelle:

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

Olkoon meillä myös jokin funktio square, joka palauttaa arvon num neliön. Funktion kutsun tulos tallennetaan muttujaan result:

const result = square(num);

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

Näytetään result painikkeen tekstissä:

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

Tuloksena saimme seuraavan: kun painiketta klikataan, muuttuu arvo num, joka sitten korotetaan neliöön, ja kun otsikkoa klikataan, muuttuu otsikon väri.

Komponenttimme on hyvin pieni, kaikki toimii nopeasti, huolimatta siitä, että otsikkoa klikatessa sen värin vaihtamiseksi koko komponentti piirretään uudelleen, jonka myötä tapahtuu uudelleen myös laskennat, jotka liittyvät painikkeeseen, tämä jopa silloin, kun emme ole koskeneet siihen. Ja nyt kuvittele, jos laskelmamme olisivat olleet volyymiltaan suuria ja kaikki laskettaisiin uudelleen joka kerta.

Raskastetaan funktiotamme hieman, nyt se miettii vähän kauemmin. Näin me simuloidaan pitkiä laskentoja:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Ei tehdä mitään ...
	}
	
	return num * num;
}

Klikkaile nyt otsikkoa. Käy niin, että nyt funktion square hitaan toiminnan takia (emmehän koske painikkeeseen) meidän täytyy odottaat ikuisuus, jotta otsikon väri muuttuu!

Tässä apuun tulee hook useMemo. Tätä varten meidän täytyy ensimmäisenä parametrina välittää funktio, joka laskee arvon, jonka haluamme välimuistaa, tämän funktion tulee olla puhdas eikä ottaa vastaan parametreja. Ja toisena parametrina - riippuvuudet hakasuluissa, toisin sanoen, kaikki reaktiiviset arvot, jotka osallistuvat funktion koodiin. Näin ollen, result:iin kirjoitamme nyt tällaisen rakenteen:

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

Klikataan uudelleen otsikkoa. Nyt, jos emme koske laskentapainikkeeseen eikä tilan num arvo siten muutu, mitään ei lasketa uudelleen, ja React näyttää välimuistetun arvon painikkeessa, siksi otsikkomme vauhdikkaasti vaihtaa väriään.

Luo komponentti App, sijoita siihen kappale. Luo tila text alkuarvolla 'react', olkoon tilan arvo näkyvissä kappaleen tekstinä. Tee niin, että kappaletta klikatessa, sen tekstin loppuun lisätään huutomerkki.

Luo toinen tila num, alkuarvolla 0. Sijoita App:iin toinen kappale. Tee niin, että sitä klikattaessa num kasvaa 1:llä.

Lisää nyt App:iin funktio triple, joka parametrina vastaanottaa num ja palauttaa sen kolminkertaisen arvon. Aseta funktion kutsumisen tulos muttujaan result. Näytä result toisen kappaleen tekstinä. Klikkaile vuorotellen kappaleita, huomaa, kuinka hitaasti huutomerkit lisääntyvät.

Korjaa tilanne, käärimällä hidas funktio triple useMemo:hon.