Veiktspējas optimizācijas hoks useCallback React

Šajā nodarbībā mēs apskatīsim nākamo veiktspējas optimizācijas hoku useCallback.

Hoks useCallback ir līdzīgs API useMemo, atšķirība ir tā, ka pirmais kešo vērtību starp ekrāna pārzīmēšanas reizēm, bet otrais - atpakaļizsaukumu. Tas ļauj mums nepārstartēt resursietilpīgās funkcijas, kad tas nav nepieciešams, un var tikt izmantots, nododot funkciju meitas komponentēs.

Ļaujiet mums sīkāk izprast ar piemēru. Vispirms izveidosim komponentu App un tajā izveidosim stāvokli num:

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

Lai mums ir poga, uz kuras klikšķinot num palielinās par 1, un rindkopa, kurā mēs izvadīsim vērtību num:

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

Un tagad pieņemsim, ka mums App izvada vēl kādu sarakstu ar elementiem, kuru mēs papildināsim nospiežot citu pogu. Lai glabātu šī saraksta elementus, mēs izveidosim stāvokli items:

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

Un tad uzrakstīsim funkciju addItem to pievienošanai:

function addItem() {
	setItems([...items, 'new item']);
}

Tagad uzrakstīsim kodu saraksta elementu attēlošanai un izņemsim to atsevišķā meitas komponentē Items, kas props veidā sausems elementu masīvu un funkciju to pievienošanai. Neaizmirsīsim pievienot izvadi konsolē, lai redzētu kad mūsu Items tiks pārzīmēts:

function Items({ items, addItem }) {

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

export default Items;

Ievietosim Items komponenta App beigās un nodosim tam masīvu items un funkciju elementu pievienošanai addItem:

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

Un tagad paklikšķināsim uz pogām un pārliecināsimies, ka num aug un jauni elementi tiek pievienoti sarakstam. Un atverot konsoli, mēs redzēsim, ka mūsu saraksts tiek pārzīmēts katru reizi, pat ja mēs klikšķinām uz pogas, kas palielina num.

Ja mums ir mazs saraksts, tad viss kārtībā, bet ja tiek pieņemts, ka tas būs apjomīgs un tur ir daudz kas cits? Nekādas nepatikšanas - jūs teiksiet, jo iepriekšējā nodarbībā mēs apskatījām API memo, lai tieši izvairītos no nevajadzīgām komponenta pārzīmēšanām.

Tāpēc iesienim mūsu komponentu Items memo un viss kārtībā. Starp citu to var izdarīt tieši eksportējot Items:

export default memo(Items);

Neaizmirsīsim importēt memo:

import { memo } from 'react';

Un tagad atvērsim konsoli un paklikšķināsim uz pogām. Visi centieni veltīgi! Mēs izmantojiām memo, bet nospiežot uz pogas 'click' komponents Items tik un tā tiek pārzīmēts katru reizi.

Lieta tāda, ka kad vecāka komponenta tiek pārzīmēts, tā funkcijas tiek atkārtoti izveidotas no jauna - tas attiecas arī uz mūsu funkciju addItem, ko mēs nododam Items.

Tieši šajā brīdī mums palīdzēs hoks useCallback. Ļaujiet mums to izmantot. Vispirms importēsim to App:

import { useCallback } from 'react';

Pēc tam pārveidosim vienkāršo funkcijas deklarāciju addItem par Function Expression, norādīsim kā pirmo parametru useCallback mūsu funkciju atpakaļizsaukuma veidā. Otro parametru kvadrātiekavās norādīsim atkarības - visas reaktīvās mainīgās, kuras piedalās funkcijā, mūsu gadījumā tas ir masīvs items:

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

Gatavs! Tādējādi mēs ir kešojuši funkciju. Nospiežam vēlreiz uz pogām un redzam, ka tagad, nospiežot uz pogas 'click' mūsu meitas komponents netiek pārzīmēts.

Izveidojiet komponentu App, ievietojiet tajā rindkopu ar tekstu. Izveidojiet stāvokli ar sākotnējo vērtību 'text' un izvadiet to rindkopā. Lai, uzklikšķinot uz rindkopas, teksta beigās tiktu pievienots izsaukuma zīme.

Izveidojiet meitas komponentu Products, kurā jums būs poga jauna produkta pievienošanai. Ievietojiet to App. Vecāka komponentā izveidojiet stāvokli ar produktu masīvu un funkciju jauna produkta pievienošanai. Nododiet tos kā props meitas komponentā, izvadiet tajā nodoto masīvu kā sarakstu ul.

Products izvadiet konsolē tekstu 'products render'. Ietveriet Products memo. Paklikšķiniet uz rindkopas un pogas. Pārliecinieties, ka, uzklikšķinot uz rindkopas, meitas komponents tik un tā tiek pārzīmēts.

Iekešojiet funkciju produktu pievienošanai, ietverot to hookā useCallback. Paklikšķiniet uz rindkopas un pogas. Pārliecinieties, ka, uzklikšķinot uz rindkopas, meitas komponents vairs netiek pārzīmēts.