Prestandaoptimeringshooken useMemo i React

Den första hooken för prestandaoptimering som vi ska titta på är useMemo.

Denna hook hjälper till att cacha resultaten av resurskrävande operationer mellan skärmuppdateringar och kan därigenom hjälpa till att undvika onödiga omfattande beräkningar. Denna typ av cachelagring kallas också för memoization.

Låt oss se hur det fungerar. Låt oss skapa en komponent med en knapp och en rubrik h3:

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

Och nu ska vi göra så att färgen på rubriken ändras från orange till grön och tillbaka när man klickar på den. Låt oss först skapa ett tillstånd isGreen:

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

Lägg till ett villkor för att ändra färg på rubriken i attributet style och lägg till en klickhanterare:

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

Låt oss också ha ett värde som ökar med ett när man klickar på vår knapp. Låt oss skapa ett tillstånd för det:

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

Lägg till hantering av klick på knappen:

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

Låt oss också ha en funktion square som returnerar kvadraten av värdet num. Resultatet av funktionsanropet kommer vi att spara i variabeln result:

const result = square(num);

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

Låt oss visa result i knappens text:

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

Resultatet blev följande: när man klickar på knappen ändras värdet num, som sedan kvadreras, och när man klickar på rubriken ändras rubrikens färg.

Vi har en väldigt liten komponent, allt fungerar snabbt, trots att när man klickar på rubriken för att ändra dess färg så ritas hela komponenten upp på nytt, därmed sker även beräkningarna, som är kopplade till knappen, om igen, även fast vi inte rörde den. Och tänk dig nu om våra beräkningar var omfattande och allt beräknades om varje gång.

Låt oss göra vår funktion lite tyngre, nu kommer den att tänka lite längre. På så sätt simulerar vi långvariga beräkningar:

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

Klicka nu på rubriken. Det visar sig att på grund av funktionens långsamma arbete square (och vi rör ju inte knappen!) måste vi vänta en evighet för att rubrikens färg ska ändras!

Här kommer hooken useMemo till vår hjälp. För att göra detta behöver vi i den första parametern skicka en funktion som beräknar värdet som vi vill cacha, denna funktion måste vara ren och inte ta några parametrar. Och i den andra parametern - beroenden i hakparenteser, med andra ord, alla reaktiva värden som ingår i funktionens kod. Sålunda, i result skriver vi nu följande konstruktion:

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

Låt oss klicka på rubriken igen. Nu, om vi inte rör knappen med beräkningarna och inte ändrar värdet på tillståndet num på så sätt, så beräknas inget om, och React visar det cachade värdet i knappen, därför ändrar vår rubrik snabbt färg.

Skapa en komponent App, placera ett stycke i den. Skapa ett tillstånd text med startvärdet 'react', låt tillståndets värde visas som text i stycket. Låt det så att när man klickar på stycket läggs ett utropstecken till i slutet av texten.

Skapa ytterligare ett tillstånd num, med startvärde 0. Placera i App ytterligare ett stycke. Gör så att när man klickar på det ökar num med 1.

Och lägg nu till funktionen triple i App, som tar num som parameter och returnerar dess tredubblade värde. Sätt resultatet av funktionsanropet i variabeln result. Visa result som text i det andra stycket. Klicka i tur och ordning på styckena, notera hur långsamt utropestecknen läggs till.

Åtgärda situationen genom att lägga in den långsamma funktionen triple i useMemo.