Reactдаги useMemo иш чиқиришни оптималлаштириш ҳуки

Биз кўриб чиқадиган биринчи иш чиқиришни оптималлаштириш ҳуки - бу useMemo.

Бу ҳук экран қайта чизилиш пайтлари ўртасида ресурс талаб қилувчи операциялар натижаларини кэшлашга ёрдам беради ва шунинг учун қўшимча ҳажмли ҳисоб-китобларнинг олдини олишга ёрдам беради. Бундай кэшлаш мемоизация деб ҳам аталади.

Бу қандай ишлашини кўрамиз. Келинг, тугма ва h3 сарлавҳаси бор компонент яратайлик:

return (
	<div>
		<h3>Матн</h3>
		<button>боскинг</button>
	</div>
);

Энди esa, сарлавҳага босилганда унинг рангі ҳақиқий ёшилдан сабзиға ва акснинча ўзгаришини таъминлаймиз. Бошлаш учун isGreen стейтини яратамиз:

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

Сарлавҳанинг style атрибутига сарлавҳа рангини ўзгартириш учун шарт қўшамиз ва босилши ишловчисини ўрнатамиз:

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

Бизда бiron қиймат бўлсин, у бизнинг тугмачамизга босилганда биттага ўсади. Унга стейт яратамиз:

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

Тугмага босилшини ишловчисини қўшамиз:

<button onClick={() => setNum(num + 1)}>
	босилди
</button>

Бизда шунингдек square деган функция бўлсин, у num қийматининг квадратини қайтаради. Функцияни чақириш натижасини result ўзгарувчисига ёзамиз:

const result = square(num);

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

result ни тугма матнида чиқарамиз:

<button onClick={() => setNum(num + 1)}>
	босилди: {result}
</button>

Натижада бизга куйидаги чиқди: тугмага босилганда num қиймати ўзгаради, сўнгра у квадратга кўтарилади, сарлавҳага босилганда эса сарлавҳа ранги ўзгаради.

Бизда жуда кичик компонент, ҳаммаси тез ишлайди, гарчи сарлавҳа рангнии ўзгартириш учун унинг устига босилганда бутун компонент қайтадан чизилишига қарамай, шунинг учун тугмага богланган ҳисоб-китоблар ҳам қайтадан амалга оширилади, бу ҳатто биз унга тегмаганимизда ҳам. Энди esa тасаввур қилинг, агар бизнинг ҳисоб-китобларимиз ҳажмли бўлса ва ҳар сафар ҳаммаси қайтадан ҳисобланса.

Келинг, бизнинг функциямизни бироз огирлаштирамиз, енди у бироз кўпроқ ўйлайди. Шу тариқа биз узун ҳисоб-китобларни симуляция қиламиз:

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 1 га ўсишини таъминланг.

Энди esa App га triple функциясини қўшинг, у параметр сифатида num ни қабул қилади ва унинг учланган қийматини қайтаради. Функцияни чақириш натижасини result ўзгарувчисига қўйинг. result ни иккинчи абзац матни сифатида кўрсатинг. Абзацларга навбат билан босинг, унинглитириш белгилари қандай секин қўшилаётганини қайд этинг.

Вазиятни тузатинг, секин triple функциясини useMemo га ўраб.