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 ичине ороп, жагдайды оңдоп бергиле.