Reacti jõudluse optimeerimise hook useCallback

Selles õppetükis vaatleme järgmist jõudluse optimeerimise hooki useCallback.

Hook useCallback on sarnane API-le useMemo, erinevus seisneb selles, et esimene vahemälu väärtuse ekraani ümberjoonistamise hetkedel ja teine - callback. See võimaldab meil mitte taaskäivitada ressursimahukaid funktsioone, kui seda pole vaja ja saab kasutada funktsiooni edastamisel alamkomponentidesse.

Võtame näite abil täpsemalt selgeks. Alustuseks loome komponendi App ja loome selles oleku num:

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

Olgu meil nupp, millele klõpsates num suureneb 1 võrra, ja lõik, kus me väljastame väärtuse num:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>klõpsa</button>
		<p>klõpsud: {num}</p>
	</div>
);

Ja nüüd oletame, et meie App kuvatakse veel mingi loend elementidega, mida me täiendame teise nupu vajutamisel. Nende hoidmiseks loome oleku items:

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

Ja siis kirjutame funktsiooni addItem nende lisamiseks:

function addItem() {
	setItems([...items, 'uus ese']);
}

Nüüd kirjutame koodi loendi elementide kuvamiseks ja viime selle alamkomponenti Items, mis saab propitena massiivi elemente ja funktsiooni nende lisamiseks. Ärge unustage lisada konsooli väljundit, et näha millal meie Items ümber joonistatakse:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items renderdub');
	
	return (
		<div>
			<h3>Meie esemed</h3>
			{result}
			<button onClick={addItem}>lisa ese</button>
		</div>
	);
}

export default Items;

Asetame Items komponendi App lõppu ja anname edasi massiivi items ja funktsiooni elementide lisamiseks addItem:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>klõpsa</button>
			<p>klõpsud: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

Ja nüüd vajutame nuppude peale ja veendume, et num kasvab ja uued elemendid lisatakse loendisse. Ja konsooli avades näeme, et meie loend joonistatakse ümber iga kord, isegi kui me klõpsame nupul, mis suurendab num.

Kui meil on väike loend, siis kõik on korras, aga kui eeldatakse, et see on mahukas ja seal on palju muud? Pole hullu - ütlete te, sest eelmisel tunnil me vaatasime API-d memo, et just vältida tarbetuid komponendi ümberjoonistamisi.

Nii et mähkime oma komponendi Items memo sisse ja kõik on korras. Muide saab seda teha otse Items eksportimisel:

export default memo(Items);

Ärge unustage importida memo:

import { memo } from 'react';

Ja nüüd avame konsooli ja vajutame nuppude peale. Kõik jõupingutused asjatud! Me memoiseerisime komponendi, kuid nupu 'klõpsa' vajutamisel komponent Items ikkagi joonistatakse ümber iga kord.

Asi on selles, et kui vanemkomponent joonistatakse ümber, taastatakse tema funktsioonid uuesti - see puudutab ka meie funktsiooni addItem, mille me edastame Items.

Just sel hetkel aitab meid hook useCallback. Rakendame seda. Alustuseks importime selle App:

import { useCallback } from 'react';

Seejärel teisendame lihtsa funktsiooni deklaratsiooni addItem Funktsiooni Avaldiseks, määrame esimeseks parameetriks useCallback jaoks meie funktsiooni callbackina. Teise parameetrina kandilistes sulgudes määrame sõltuvused - kõik reaktiivsed muutujad, mis funktsioonis osalevad, meie puhul see on massiiv items:

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

Valmis! Nii me vahemällu talletasime funktsiooni. Vajutame uuesti nuppude peale ja näeme, et nüüd nupu 'klõpsa' vajutamisel meie alamkomponent ei joonistu ümber.

Looge komponent App, asetage sinna lõik tekstiga. Looge olek algväärtusega 'tekst' ja väljastage see lõigus. Olgu klõps lõigu peale lisab selle teksti lõppu hüüumärgi.

Looge alamkomponent Products, milles teil on nupp uue toote lisamiseks. Asetage see App sisse. Vanemkomponendis looge olek koos toodete massiiviga ja funktsioon uue toote lisamiseks. Edastage need propitena alamkomponenti, kuvage selles edastatud massiiv loendina ul.

Products kuvage konsoolis tekst 'products renderdub'. Mähkige Products memo sisse. Klõpsake lõigu ja nupu peal. Veenduge, et lõigu peale klõpsamisel alamkomponent ikkagi joonistatakse ümber.

Vahemällu talletage funktsioon toodete lisamiseks, mähkides selle hooki useCallback sisse. Klõpsake lõigu ja nupu peal. Veenduge, et lõigu peale klõpsamisel alamkomponent enam ei joonistu ümber.