Хуки оптимизатсияи иҷро дар 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>

Бигзор ҳамчунин функсияи square бошад, ки квадрати қимати num-ро бармегардонад. Натиҷаи фарохонӣ ба функсияро ба тағйирёбандаи 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 созед, дар он абзас ҷойгир кунед. Стейти text созед бо қимати ибтидоии 'react', бигзор қимати стейт нишон дода шавад ҳамчун матни абзас. Бигзор бо клик дар абзас, ба охири матни он аломати воҳид илова шавад.

Стейти дигари num созед, бо қимати ибтидоии 0. Дар App абзаси дигар ҷойгир кунед. Чунон кунед, то ки ҳангоми клик кардан дар он num бар 1 афзоиш ёбад.

Ва акнун ба App функсияи triple илова кунед, ки ҳамчун параметр num-ро мегирад ва қимати себаробари онро бармегардонад. Натиҷаи фарохонӣ ба функсияро дар тағйирёбандаи result гузоред. result-ро ҳамчун матни абзаси дуюм нишон диҳед. Бо тартиб рӯи абзасҳо клик кунед, қайд кунед, ки аломатҳои воҳид чӣ қадар оҳиста илова мешаванд.

Ҳолатро ислоҳ кунед, функсияи оҳисти triple-ро дар useMemo печонед.