Die gebruikMemo-prestasie-optimaliseringshaak in React

Die eerste haak vir prestasie-optimalisering wat ons sal ondersoek is useMemo.

Hierdie haak help om die resultate van hulpbronintensiewe bewerkings tussen hertekeninge van die skerm te kas en kan dus help om onnodige omvangryke berekeninge te vermy. Sodanige kas word ook memoisering genoem.

Laat ons kyk hoe dit werk. Kom ons skep 'n komponent met 'n knoppie en 'n h3-opskrif:

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

En nou sal ons dit so maak dat wanneer daar op die opskrif geklik word, die kleur daarvan van oranje na groen verander en terug. Om te begin laat ons 'n staat isGreen skep:

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

Kom ons voeg in die style-kenmerk van die opskrif 'n voorwaarde vir kleurverandering by en laat ons 'n klikhanterer byvoeg:

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

Laat ons ook 'n waarde hê wat sal toeneem met een wanneer daar op ons knoppie geklik word. Laat ons 'n staat daarvoor skep:

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

Kom ons voeg die hantering van die klik op die knoppie by:

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

Laat ons ook 'n funksie hê square, wat die kwadraat van die waarde num sal teruggee. Die resultaat van die funksie-aanroep sal ons in die veranderlike result skryf:

const result = square(num);

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

Laat ons result in die knoppie-teks vertoon:

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

Uiteindelik het ons die volgende: wanneer op die knoppie geklik word, verander die waarde num, wat dan gekwadreer word, en wanneer op die opskrif geklik word verander die kleur van die opskrif.

Ons het 'n baie klein komponent, alles werk vinnig, ondanks die feit dat wanneer daar op die opskrif geklik word om die kleur te verander, die hele komponent weer geteken word, en gevolglik gebeur al die berekeninge wat aan die knoppie gekoppel is, weer, selfs al raak ons dit nie aan nie. En stel jou nou voor as ons berekeninge omvangryk was en alles elke keer weer bereken sou word.

Kom ons maak ons funksie 'n bietjie swaarder, nou sal dit 'n bietjie langer dink. Op hierdie manier sal ons lang berekeninge simuleer:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Doen net niks ...
	}
	
	return num * num;
}

Klik nou op die opskrif. Dit blyk dat nou, as gevolg van die lang werk van die funksie square (en ons raak nie die knoppie aan nie) moet ons 'n ewigheid wag voordat die opskrif van kleur verander!

Hier kom die useMemo-haak ons te hulp. Om dit te doen, moet ons as eerste parameter 'n funksie deurgee wat die waarde bereken wat ons wil kas, hierdie funksie moet suiwer wees en geen parameters aanvaar nie. En as tweede parameter - die afhanklikhede in vierkantige hakies, met ander woorde, alle reaktiewe waardes wat in die funksiekode deelneem. Dus, in result sal ons nou so 'n konstruksie skryf:

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

Klik weer op die opskrif. Nou, as ons nie die knoppie met die berekeninge aanraak nie en dus nie die staatswaarde num verander nie, word niks herbereken nie, en React vertoon die gekaste waarde in die knoppie, daarom verander ons opskrif vinnig sy kleur.

Skep 'n komponent App, plaas 'n paragraaf daarin. Skep 'n staat text met die aanvanklike waarde 'react', laat die staatswaarde vertoon word as die teks van die paragraaf. Laat, by 'n klik op die paragraaf, 'n uitroepteken aan die einde van die teks gevoeg word.

Skep nog 'n staat num, met 'n aanvanklike waarde van 0. Plaas in App nog 'n paragraaf. Maak dit so dat wanneer daar daarop geklik word, num met 1 toeneem.

En voeg nou by in App die funksie triple, wat as parameter num aanvaar en die driedubbelde waarde daarvan teruggee. Plaas die resultaat van die funksie-aanroep in die veranderlike result. Vertoon result as die teks van die tweede paragraaf. Klik een vir een op die paragrawe, let op hoe stadig die uitroeptekens bygevoeg word.

Herstel die situasie deur die stadige funksie triple in useMemo te verpak.