Արդյունավետության օպտիմիզացիայի useMemo հուկը React-ում

Արդյունավետության օպտիմիզացիայի առաջին հուկը, որը մենք կդիտարկենք, useMemo-ն է:

Այս հուկը օգնում է կեշավորել ռեսուրսատար գործողությունների արդյունքները էկրանի վերագծման պահերի միջև և, համապատասխանաբար, կարող է օգնել խուսափել ավելորդ ծավալուն հաշվարկներից: Նման կեշավորումը անվանում են նաև մեմոիզացիա:

Տեսնենք, թե ինչպես է այն աշխատում: Եկեք ստեղծենք բաղադրիչ կոճակով և վերնագիր h3-ով.

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

Իսկ հիմա անենք այնպես, որ վերնագրի վրա կտտացնելիս նրա գույնը փոխվի նարնջագույնից կանաչի և հակառակը: Սկզբից սահմանենք isGreen ստեյթը.

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

Ավելացնենք style ատրիբուտում վերնագրի գույնի փոփոխման պայման և կցենք կտտոցի մշակիչ.

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

Թող նաև ունենանք ինչ-որ արժեք, որը կմեծանա կոճակի վրա կտտացնելիս մեկով: Սահմանենք դրա համար ստեյթ.

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

Ավելացնենք կոճակի վրա կտտացնելու մշակում.

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

Թող նաև ունենանք ինչ-որ ֆունկցիա square, որը կվերադարձնի num արժեքի քառակուսին: Ֆունկցիայի կանչի արդյունքը կգրենք result փոփոխականի մեջ.

const result = square(num);

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

Ցուցադրենք result-ը կոճակի տեքստում.

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

Արդյունքում ստացանք հետևյալը. կոճակի վրա կտտացնելիս փոխվում է num արժեքը, որն այնուհետև աստիճանաբար բարձրացվում է քառակուսի, իսկ վերնագրի վրա կտտացնելիս փոխվում է վերնագրի գույնը.

Մենք ունենք շատ փոքր բաղադրիչ, ամեն ինչ աշխատում է արագ, չնայած այն հանգամանքին, որ կտտացնելիս վերնագրի վրա՝ նրա գույնը փոխելու համար, ամբողջ բաղադրիչը վերագծվում է նորից, համապատասխանաբար, նորից են տեղի ունենում հաշվարկները, որոնք կապված են կոճակի հետ, և սա նույնիսկ այն դեպքում, երբ մենք դրան չենք դիպչել: Իսկ հիմա պատկերացրեք, եթե մեր հաշվարկները ծավալուն լինեին և ամեն ինչ նորից հաշվարկվեր ամեն անգամ.

Եկեք մի փոքր ծանրացնենք մեր ֆունկցիան. այժմ այն կմտածի մի փոքր ավելի երկար: Այսպիսով մենք կիմիտացնենք երկար հաշվարկներ.

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Պարզապես ոչինչ չանել ...
	}
	
	return num * num;
}

Հիմա կտտացրեք վերնագրին: Ստացվում է, որ այժմ ֆունկցիայի երկար աշխատանքի պատճառով square (իսկ կոճակին-էլ մենք չենք դիպչում) մենք մի ամբողջ հավերժություն պետք է սպասենք, որպեսզի վերնագիրը փոխի իր գույնը:

Այստեղ մեզ օգնության կգա useMemo հուկը: Դրա համար մենք պետք է առաջին պարամետրով փոխանցենք ֆունկցիա, որը հաշվարկում է արժեքը, որը մենք ցանկանում ենք կեշավորել. այդ ֆունկցիան պետք է լինի մաքուր և չընդունի ոչ մի պարամետր: Իսկ երկրորդ պարամետրով՝ կախվածությունները քառակուսի փակագծերում, այլ կերպ ասած, բոլոր ռեակտիվ արժեքները, որոնք մասնակցում են ֆունկցիայի կոդում: Այսպիսով, result-ում մենք այժմ կգրենք այսպիսի կոնստրուկցիա.

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

Կրկին կտտացնենք վերնագրին: Այժմ, եթե մենք չենք դիպչում հաշվարկներով կոճակին և չենք փոխում այդպիսով num ստեյթի արժեքը, ապա ոչինչ չի վերահաշվարկվում, և React-ը ցուցադրում է կեշավորված արժեքը կոճակում, ուստի մեր վերնագիրը արագությամբ փոխում է իր գույնը.

Ստեղծեք App բաղադրիչ, տեղադրեք դրանում պարբերություն: Սահմանեք text ստեյթ սկզբնական արժեքով 'react'. թող ստեյթի արժեքը ցուցադրվի որպես պարբերության տեքստ: Թող պարբերության վրա կտտացնելիս նրա տեքստի վերջում ավելանա բացականչական նշան:

Սահմանեք ևս մեկ num ստեյթ, սկզբնական արժեքով 0: Տեղադրեք App-ում ևս մեկ պարբերություն: Անեք այնպես, որ դրա վրա կտտացնելիս num-ը mեծանա 1-ով:

Իսկ հիմա ավելացրեք App-ում ֆունկցիա triple, որը որպես պարամետր ընդունում է num-ը և վերադարձնում է նրա եռապատկված արժեքը: Դրեք ֆունկցիայի կանչի արդյունքը result փոփոխականի մեջ: Ցուցադրեք result-ը որպես երկրորդ պարբերության տեքստ: Հերթով կտտացրեք պարբերություններին, նշեք, թե որքան դանդաղ են ավելանում բացականչական նշանները:

Ուղղեք իրավիճակը, փաթաթելով դանդաղ triple ֆունկցիան useMemo-ի մեջ: