React-тегі useMemo өнімділік оңтайландыру хукі

Біз қарастыратын бірінші өнімділікті оңтайландыру хукі - бұл useMemo.

Бұл хук экранды қайта сызу аралығында ресурсты қажет ететін операциялардың нәтижелерін кэштейуге көмектеседі және сәйкесінше артық көлемді есептеулерден құтылуға көмектесе алады. Мұндай кэштейуді мемоизация деп те атайды.

Бұл қалай жұмыс істейтінін қарастырайық. Келіңіздер, батырмасы және h3 тақырып жазбасы бар компонент жасайық:

return (
	<div>
		<h3>Мәтін</h3>
		<button>басу</button>
	</div>
);

Ал енді тақырып жазбасын басқан кезде оның түсі қызғылт сарыдан жасылға және керісінше өзгеруін жасайық. Алдымен isGreen стейтін құрастырайық:

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

Тақырып жазбасының style атрибутына тақырып жазбасының түсін өзгерту шартын қосайық және басу оқиғасын қосамыз:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Мәтін</h3>

Сондай-ақ, бізде батырманы басқан кезде бірлікке өсетін қандай да бір мән болсын. Ол үшін стейт құрастырайық:

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

Батырманы басу оқиғасын қосамыз:

<button onClick={() => setNum(num + 1)}>
	басу саны
</button>

Сондай-ақ, бізде num мәнінің квадратын қайтаратын square функциясы болсын. Функцияны шақыру нәтижесін result айнымалысына жазамыз:

const result = square(num);

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

result-ті батырма мәтінінде көрсетейік:

<button onClick={() => setNum(num + 1)}>
	басу саны: {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 компонентін жасаңыз, оның ішіне абзац орналастырыңыз. Бастапқы мәні 'react' болатын text стейтін құрастырыңыз, стейт мәні абзац мәтіні ретінде көрсетілсін. Абзацты басқан кезде, оған мәтін соңына леп белгісі қосылатын болсын.

Тағы бір num стейтін құрастырыңыз, бастапқы мәні 0 болатын. App-те тағы бір абзац орналастырыңыз. Оны басқан кезде num-тің 1-ге өсетіндей етіп жасаңыз.

Ал енді App-қа triple функциясын қосыңыз, ол параметр ретінде num-ті қабылдайды және оның үш еселенген мәнін қайтарады. Функцияны шақыру нәтижесін result айнымалысына салыңыз. result-ті екінші абзацтың мәтіні ретінде көрсетіңіз. Абзацтарды кезек-кезек басып көріңіз, леп белгілерінің қаншалықты баяу қосылатынын байқаңыз.

Жағдайды түзетіңіз, баяу triple функциясын useMemo-ға орап.