Kifaa cha Uboreshaji wa Utendaji useMemo katika React

Kifaa cha kwanza cha uboreshaji wa utendaji tutakachochunguza ni useMemo.

Kifaa hiki kinasaidia kuhifadhi matokeo ya shughuli zenye kutumia rasilimali nyingi kati ya nyakati za kuonyesha upya skrini na ipasavyo inaweza kusaidia kuepuka mahesabu mazito ya ziada. Hifadhi hiyo huitwa pia ukumbusho.

Tutaona jinsi inavyofanya kazi. Wacha tuunde sehemu yenye kifuta na kichwa h3:

return (
	<div>
		<h3>Maandishi</h3>
		<button>bofya</button>
	</div>
);

Sasa tufanye ili kwa kubofya kichwa rangi yake ibadilike kutoka machungwa hadi kijani na kurudi nyuma. Kwanza tuweke hali isGreen:

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

Weka katika sifa style ya kichwa hali ya kubadilisha rangi kichwani na uweke kichakato cha kubofya:

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

Iwe pia tuna thamani fulani, ambayo itaongezeka kwa kubofya kifuta chetu kwa moja. Tuweke hali yake:

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

Weka uchakaji wa kubofya kifutani:

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

Iwe pia tuna kitendaji fulani square, ambacho kitarudisha mraba wa thamani num. Matokeo ya wito wa kitendaji tutayaandika kwenye kigeuzi result:

const result = square(num);

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

Tuonyeshe result kwenye maandishi ya kifuta:

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

Kwa matokeo tuliyopata ni yafuatayo: kwa kubofya kifuta thamani ya num inabadilika, kisha inainuliwa mraba, na kwa kubofya kichwani rangi ya kichwa inabadilika.

Tuna sehemu ndogo sana, kila kitu kinafanya kazi haraka, licha ya kwamba kwa kubofya kichwani ili kubadilisha rangi yake sehemu nzima inaonyeshwa upya, ipasavyo hutokea tena na mahesabu, yanayohusishwa na kifuta, hii hata kwa kuwa hatukugusa. Na sasa fikiria kama mahesabu yetu yangalikuwa mazito na yote yangehesabiwa upya kila wakati.

Wacha, tuzidishie kidumu kitendaji chetu, sasa kitawaza kidumu zaidi. Hivyo tutaiga mahesabu marefu:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Tu usifanye chochote ...
	}
	
	return num * num;
}

Bonyeza tena kichwani. Inatokea, kwamba sasa kwa sababu ya kufanya kazi kwa muda mrefu kwa kitendaji square (na kifuta hatukikigusa) tunapaswa kusubiri milele, ili kichwa kibadilishe rangi yake!

Hapa ndio utasaidiwa na kifaa useMemo. Kwa hili, tunahitaji kwanza kupitisha kigeuzo cha kwanza kitendaji, kinachohesabu thamani, tunayotaka kuhifadhi, kitendaji hiki kinabidi kiwe safi na kisichukue vigeuzo vyovyote. Na kigeuzo cha pili - tegemezi kwenye mabano mraba kwa maneno mengine, maadili yote yanayobadilika yanayohusika katika msimbo wa kitendaji. Hivyo, kwenye result sasa tutaandika muundo kama huu:

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

Bonyeza tena kichwani. Sasa, kama hatutoi kifuta chenye mahesabu na hatubadilishi hivyo thamani ya hali num, basi hakuna kinachohesabiwa upya, na React inaonyesha thamani iliyohifadhiwa kwenye kifuta, kwa hivyo kichwa chetu kinabadilisha rangi yake haraka.

Unda sehemu App, weka ndani yake aya. Weka hali text na thamani ya mwanzo 'react', iwe thamani ya hali inaonyeshwa kama maandishi ya aya. Iwe kwa kubofya aya, mwisho wake wa maandishi huongezewa alama ya mshangao.

Weka hali nyingine num, na thamani ya mwanzo 0. Weka kwenye App aya nyingine. Fanya ili kwa kubofya kwake num iongezeke kwa 1.

Sasa ongeza kwenye App kitendaji triple, ambacho kama kigeuzo huchukua num na kinarudisha thamani yake iliyozidishwa mara tatu. Weka matokeo ya wito wa kitendaji kwenye kigeuzo result. Onyesha result kama maandishi ya aya ya pili. Bofya kwa mpangilio kwenye aya, weka alama, jinsi taratibu inavyoongezwa alama za mshangao.

Sahihisha hali hiyo, kwa kufunga kitendaji chenye kutardimia triple ndani ya useMemo.