Veiktspējas optimizācijas āķis useMemo React

Pirmais āķis veiktspējas optimizācijai, ko mēs apskatīsim - ir useMemo.

Šis āķis palīdz kešot resursusietilpīgu operāciju rezultātus starp ekrāna pārzīmēšanas momentiem un attiecīgi var palīdzēt izvairīties no nevajadzīgiem apjomīgiem aprēķiniem. Šādu kešošanu sauc arī par memorizāciju.

Apskatīsim, kā tas darbojas. Izveidosim komponentu ar pogu un virsrakstu h3:

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

Un tagad padarīsim tā, lai, noklikšķinot uz virsraksta, tā krāsa mainītos no oranžas uz zaļu un atpakaļ. Sākumā izveidosim stāvokli isGreen:

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

Pievienosim atribūtā style virsrakstam nosacījumu krāsas maiņai un pievienosim klikšķa apstrādi:

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

Lai mums arī ir kāda vērtība, kas palielināsies, noklikšķinot uz mūsu pogas, par vienu. Izveidosim tam stāvokli:

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

Pievienosim klikšķa apstrādi pogai:

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

Lai mums arī ir kāda funkcija square, kas atgriezīs vērtības num kvadrātu. Funkcijas izsaukuma rezultātu ierakstīsim mainīgajā result:

const result = square(num);

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

Parādīsim result pogas tekstā:

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

Rezultātā mēs ieguvām sekojošo: noklikšķinot uz pogas, mainās vērtība num, kas pēc tam tiek pacelta kvadrātā, un, noklikšķinot uz virsraksta, mainās virsraksta krāsa.

Mums ir ļoti mazs komponents, viss strādā ātri, neskatoties uz to, ka, noklikšķinot uz virsraksta, lai mainītu tā krāsu, viss komponents tiek pārzīmēts no jauna, attiecīgi notiek no jauna arī aprēķini, kas piesaistīti pogai, tas pat ar to, ka mēs tai nepieskārāmies. Un tagad iedomājieties, ja mūsu aprēķini būtu apjomīgi un viss būtu pārrēķināts no jauna katru reizi.

Padarīsim mūsu funkciju nedaudz smagāku, tagad tā domās mazliet ilgāk. Tādā veidā mēs imitēsim ilgus aprēķinus:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Vienkārši nedari neko ...
	}
	
	return num * num;
}

Tagad noklikšķiniet uz virsraksta. Izrādās, ka tagad funkcijas square ilgās darbības dēļ (mēs taču nepieskaramies pogai) mums veselu mūžību jāgaida, līdz virsrakstam mainās krāsa!

Šeit mums palīgā nāks āķis useMemo. Lai to izdarītu, mums ir jānodod kā pirmais parametrs funkcija, kas aprēķina vērtību, kuru vēlamies kešot, šai funkcijai jābūt tīrai un neaņemt nekādus parametrus. Un kā otrais parametrs - atkarības kvadrātiekavās, citiem vārdiem sakot, visas reaktīvās vērtības, kas piedalās funkcijas kodā. Tādējādi result mēs tagad ierakstīsim šādu konstrukciju:

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

Vēlreiz noklikšķināsim uz virsraksta. Tagad, ja mēs nepieskaramies pogai ar aprēķiniem un nemainām tādējādi stāvokļa vērtību num, tad nekas netiek pārrēķināts, un React attēlo kešoto vērtību pogā, tāpēc mūsu virsraksts ātri maina savu krāsu.

Izveidojiet komponentu App, ievietojiet tajā rindkopu. Izveidojiet stāvokli text ar sākotnējo vērtību 'react', lai stāvokļa vērtība tiek parādīta kā rindkopas teksts. Lai, noklikšķinot uz rindkopas, tās teksta beigās tiek pievienota izsaukuma zīme.

Izveidojiet vēl vienu stāvokli num, ar sākotnējo vērtību 0. Ievietojiet App vēl vienu rindkopu. Padariet tā, lai, noklikšķinot uz tās, num palielinātos par 1.

Un tagad pievienojiet App funkciju triple, kas kā parametru pieņem num un atgriež tā trīskāršo vērtību. Ievietojiet funkcijas izsaukuma rezultātu mainīgajā result. Parādiet result kā otrās rindkopas tekstu. Noklikšķiniet pēc kārtas uz rindkopām, atzīmējiet, cik lēnām tiek pievienotas izsaukuma zīmes.

Izlabojiet situāciju, ietverot lēno funkciju triple useMemo.