Kichocheo cha Uboreshaji wa Utendaji useCallback katika React

Katika somo hili tutaangalia kichocheo kifuatacho cha kuboresha utendaji useCallback.

Kichocheo useCallback ni kama API useMemo, tofauti ni kwamba la kwanza linaweka thamani kwenye kumbukumbu kati ya wakati wa kuchora upya screen, na la pili - callback. Hii inaturuhusu sisi kuzuia kuzindua tena kazi zenye kutumia rasilimali nyingi wakati haihitajiki na inaweza kutumiwa wakati wa kupitisha kazi kwa viambato vya watoto.

Hebu tuelewe kwa undani zaidi kwa kutumia mfano. Kwanza tuunde kiambato App na tuweke ndani yake hali num:

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

Wacha tuwe na kifungo, kubonyeza ambayo num huongezeka kwa 1, na aya, ambayo sisi tutaonyesha thamani ya num:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>bonyeza</button>
		<p>mibofyo: {num}</p>
	</div>
);

Na sasa, wacha tuchukue kwamba kwenye App pia kunaorodheshwa orodha fulani na vipengee, ambavyo tutaongeza kwa kubonyeza kifungo kingine. Kuhifadhi vipengee vya orodha hii tutaweka hali items:

const [items, setItems] = useState([]);

Na kisha tuandike kazi addItem kwa kuongeza:

function addItem() {
	setItems([...items, 'kipengee kipya']);
}

Sasa hebu tuandike msimbo wa kuonyesha vipengee vya orodha na tuweke katika kiambato cha mtoto Items, ambacho kwa njia ya props atapokea safu ya vipengee na kazi ya kuongeza. Tusisahau kuongeza maandishi kwenye koni, ili kuona lini Items wetu utachorwa upya:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items render');
	
	return (
		<div>
			<h3>Vipengee vyetu</h3>
			{result}
			<button onClick={addItem}>ongeza kipengee</button>
		</div>
	);
}

export default Items;

Tuweke Items mwishoni mwa kiambato App na tupitishe kwake safu items na kazi ya kuongeza vipengee addItem:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>bonyeza</button>
			<p>mibofyo: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

Na sasa tubonyeze vibonye na tuhakikishe kwamba num inaongezeka na vipengee vipya vinaongezwa kwenye orodha. Na kufungua koni, tutaona kwamba orodha yetu inachorwa upya kila wakati, hata kama tubonyeza kifungo, kinachoongeza num.

Ikiwa tuna orodha ndogo, basi kila kitu iko sawa, na ikiwa inatakiwa kuwa kubwa na kuna mengi zaidi ndani? Si shida - utasema, kwa sababu katika somo lililopita tuliangalia API memo, ili kuepuka michoro isiyohitajika ya kiambato.

Basi hebu tufunge kiambato chetu Items kwenye memo na kila kitu kitakuwa sawa. Kwa njia, hii inaweza kufanywa moja kwa moja wakati wa kuhamisha Items nje:

export default memo(Items);

Tusisahau kuagiza memo:

import { memo } from 'react';

Na sasa tufungue koni na tubonyeze vibonye. Juhudi zote bure! Sisi tumeweka kumbukumbu kiambato, lakini wakati wa kubonyeza kifungo 'bonyeza' kiambato Items bado kinachorwa upya kila wakati.

Jambo ni kwamba wakati kiambato kizazi kinachorwa upya, kazi zake zinaundwa upya - hii inahusu kazi yetu addItem, ambayo tunapitishea kwenye Items.

Ni wakati huu hasa ndio kichocheo useCallback kitatupa msaada. Hebu tutumie hicho. Kwanza tuagize ndani ya App:

import { useCallback } from 'react';

Kisha tubadilishe tamko rahisi la kazi addItem kuwa Usemi wa Kazi, tuonyeshe kama kigezo cha kwanza kwa useCallback kazi yetu kwa njia ya callback. Kigezo cha pili katika mabano mraba tuonyeshe tegemezi - anuwai zote zinazobadilika, zinazoshiriki katika kazi, kwa upande wetu hii ni safu items:

const addItem = useCallback(() => {
	setItems(() => [...items, 'Kipengee Kipya']);
}, [items]);

Imekamilika! Kwa njia hii tumeweka kwenye kumbukumbu kazi. Bonyeza tena kwenye vibonye na ona kwamba sasa wakati wa kubonyeza kifungo 'bonyeza' kiambato chetu cha mtoto hakiki kichorwi tena.

Unda kiambato App, weka ndani yake aya na maandishi. Weka hali na thamani ya kwanza 'maandishi' na uonyeshe katika aya. Wacha kwa kubofya kwenye aya maandishi yaweke alama ya mshangao mwishoni.

Unda kiambato cha mtoto Products, ambacho utakuwa na kifungo cha kuongeza bidhaa mpya. Kiweke katika App. Katika kiambato kizazi unda hali na safu ya bidhaa na kazi ya kuongeza bidhaa mpya. Zipitishe kwa namna ya props kwa mtoto, onyesha ndani yake safu iliyopitishwa kwa namna ya orodha ul.

Katika Products onyesha kwenye koni maandishi 'products render'. Funga Products kwenye memo. Bonyeza kwenye aya na kifungo. Hakikisha, kwamba wakati wa kubofya kwenye aya kiambato cha mtoto bado kinachorwa upya.

Weka kwenye kumbukumbu kazi ya kuongeza bidhaa, kwa kuifunga kwenye kichocheo useCallback. Bonyeza kwenye aya na kifungo. Hakikisha, kwamba wakati wa kubofya kwenye aya, kiambato cha mtoto hakichorwi tena.