Хуки оптимизатсияи иҷро дар React useCallback

Дар ин дарс мо хуки зеринро барои оптимизатсияи иҷро useCallback меомӯзем.

Хуки useCallback ба API-и useMemo монанд аст, фарқ дар он аст, ки аввалӣ арзишро байни лаҳзаҳои аз нав тарҳкашии экран нигоҳ медорад, ва дуюмӣ - коллбэк. Ин ба мо имкон медиҳад, ки функсияҳои захирабарандаро вақте ки лозим нест, аз нав наоғозем ва метавонад дар вақти интиқоли функсия ба компонентҳои фарзанд истифода шавад.

Биёед ба тафсилот дар мисол бипаймоем. Аввал биёед компоненти App созем ва дар он стейти num таъин кунем:

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

Бигзор тугмае дошта бошем, ки бо клик кардан рӯи он num афзоиш меёбад ба 1, ва абзасе, ки дар он мо арзиши num-ро намоиш медиҳем:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>клик</button>
		<p>кликҳо: {num}</p>
	</div>
);

Ва ҳол он ки, фарз кунем, ки дар App рӯйхати дигаре ҳам намоиш дода мешавад бо унсурҳо, ки мо бо пахш кардани тугмаи дигар ба он илова мекунем. Барои нигоҳ доштани ин унсурҳои рӯйхат мо стейти items таъин мекунем:

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

Ва сипас функсияи addItem барои илова кардани онҳо менависем:

function addItem() {
	setItems([...items, 'унсури нав']);
}

Ҳоло биёед рамзеро барои намоиш додани унсурҳои рӯйхат нависем ва онро ба компоненти фарзанди Items берун кунем, ки дар шакли пропсҳо массив унсурҳо ва функсия барои илова кардани онҳоро мегирад. Фаромӯш накунем, ки ба консоли намоиш диҳем, то бубинем вақте ки мо Items аз нав тарҳ мешавад:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items render');
	
	return (
		<div>
			<h3>Унсурҳои мо</h3>
			{result}
			<button onClick={addItem}>иловаи унсур</button>
		</div>
	);
}

export default Items;

Items-ро дар охири компоненти App ҷойгир кунем ва ба он массив items ва функсия барои илова кардани унсурҳо addItem-ро интиқол диҳем:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>клик</button>
			<p>кликҳо: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

Ва ҳоло тугмаҳоро пахш кунем ва боварӣ ҳосил кунем, ки num афзоиш меёбад ва унсурҳои нав ба рӯйхат илова мешаванд. Ва консолро кушодан, мо мебинем, ки рӯйхати мо ҳар дафъа аз нав тарҳ мешавад, ҳатто агар мо тугмаеро пахш кунем, ки num-ро зиёд мекунад.

Агар мо рӯйхати хурде дошта бошем, пас ҳама чиз хуб аст, ва агар пешбинӣ шавад, ки он �узург ва дар он бисёр чизҳои дигар низ ҳастанд? Муҳим нест - мегӯед шумо, зеро дар дарси гузашта мо API-и memo-ро дидем, то ки аз тарҳҳои нолозими компонент ҷилавгирӣ кунем.

Пас биёед компоненти худро Items дар memo бипечем ва ҳама чиз. Ҳамчунин инро метавон мустақиман дар вақти содир кардани Items анҷом дод:

export default memo(Items);

Фаромӯш накунем, ки memo-ро ворид кунем:

import { memo } from 'react';

Ва ҳоло консолро кушода, тугмаҳоро пахш кунем. Ҳама саъйҳо бефоида! Мо компонентро memoize кардем, вале вақте ки тугмаи 'клик'-ро пахш мекунем, компоненти Items ҳамчунин ҳар дафъа аз нав тарҳ мешавад.

Масала дар он аст, ки вақте ки компоненти волидайн аз нав тарҳ мешавад, функсияҳои он аз нав сохта мешаванд - ин ба функсияи мо addItem низ дахл дорад, ки мо онро ба Items интиқол медиҳем.

Айнан дар ин лаҳза ба мо хуки useCallback кӯмак мекунад. Биёед онро истифода барем. Аввал онро ба App ворид кунем:

import { useCallback } from 'react';

Сипас эълони оддии функсияи addItem-ро ба Expression-и функсия табдил диҳем, дар ҳолати якум параметр барои useCallback функсияи худро дар шакли колбэк муайян кунем. Дуюмӣ параметр дар қафаси каҷак ҳангоми муайян кардани вобастагиҳо - ҳамаи тағирёбандаҳои реактивӣ, ки дар функсия иштирок мекунанд, дар ҳолати мо ин массив items аст:

const addItem = useCallback(() => {
	setItems(() => [...items, 'унсури нав']);
}, [items]);

Омода! Ҳамин тариқ мо функсияро кэш кардем. Бори дигар тугмаҳоро пахш кунем ва мебинем, ки ҳоло вақте ки тугмаи 'клик'-ро пахш мекунем, компоненти фарзанди мо аз нав тарҳ намешавад.

Компоненти App созед, дар он абзас бо матн ҷойгир кунед. Стейт бо арзиши ибтидоии 'матн' таъин кунед ва онро дар абзас намоиш диҳед. Бигзор бо клик кардан рӯи абзас ба охири матни он аломати ситора илова шавад.

Компоненти фарзанди Products созед, ки дар он шумо тугма барои илова кардани маҳсули нав доред. Онро дар App ҷойгир кунед. Дар компоненти волидайн стейт бо массиви маҳсулот ва функсия илова кардани маҳсули нав созед. Онҳоро ба шакли пропсҳо ба фарзанд интиқол диҳед, дар он массив додашударо дар шакли рӯйхати ul намоиш диҳед.

Дар Products матнро дар консоли намоиш диҳед 'products render'. Products-ро дар memo бипечанд. Рӯи абзас ва тугма клик кунед. Боварӣ ҳосил кунед, ки ҳангоми клик кардан рӯи абзас компоненти фарзанд ҳамчунин аз нав тарҳ мешавад.

Функсия барои илова кардани маҳсулотро кэш кунед, дар хуки useCallback печида. Рӯи абзас ва тугма клик кунед. Боварӣ ҳосил кунед, ки ҳангоми клик кардан рӯи абзас, компоненти фарзанд дигар аз нав тарҳ намешавад.