Našumo optimizavimo vikšras useCallback React'e

Šioje pamokoje apžvelgsime šį našumo optimizavimo vikšrą useCallback.

Vikšras useCallback yra panašus į API useMemo, skirtumas tas, kad pirmasis kešuoja reikšmę tarp ekrano perpiešimo momentų, o antrasis - atgalinio iškvietimo funkciją. Tai leidžia mums neperleisti resursų reikalaujančių funkcijų, kai to nereikia ir gali būti naudojama perduodant funkciją į antrinius komponentus.

Išsiaiškinkime išsamiau pavyzdžiu. Pirmiausia sukurkime komponentą App ir jame sukurkime būseną num:

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

Turėkime mygtuką, paspaudus kuri num padidėja 1, ir pastraipą, kurioje rodysime reikšmę num:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>spustelėti</button>
		<p>paspaudimai: {num}</p>
	</div>
);

O dabar tarkime, kad mums App rodomas dar kažkoks sąrašas su elementais, kurį papildysime paspaudus kitą mygtuką. Elementų saugojimui šiame sąraše sukursime būseną items:

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

Ir tada parašysime funkciją addItem jų pridėjimui:

function addItem() {
	setItems([...items, 'naujas elementas']);
}

Dabar parašykime kodą sąrašo elementų atvaizdavimui ir išskirkime jį į antrinį komponentą Items, kuris kaip props gaus elementų masyvą ir funkciją jų pridėjimui. Nepamirškime pridėti išvesties į konsolę, kad matytume kada mūsų Items bus perpiešiamas:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items perpiešiamas');
	
	return (
		<div>
			<h3>Mūsų elementai</h3>
			{result}
			<button onClick={addItem}>pridėti elementą</button>
		</div>
	);
}

export default Items;

Įdėkime Items į komponento App pabaigą ir perduokime jam masyvą items ir funkciją elementų pridėjimui addItem:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>spustelėti</button>
			<p>paspaudimai: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

O dabar paspauskime mygtukus ir įsitikinkime, kad num auga ir nauji elementai pridedami į sąrašą. O atsidarę konsolę pamatysime, kad mūsų sąrašas perpiešiamas kiekvieną kartą, net jei mes spusteliame mygtuką, kuris padidina num.

Jei turime nedidelį sąrašėlį, tai viskas gerai, o jei numatoma, kad jis bus didelės apimties ir ten dar daug ko yra? Nieko baisaus - sakysite jūs, juk praeitoje pamokoje mes nagrinėjome API memo, kad būtent išvengtume nereikalingų komponento perpiešimų.

Taigi apvyniokime mūsų komponentą Items į memo ir viskas. Beje, tai galima padaryti tiesiogiai eksportuojant Items:

export default memo(Items);

Nepamirškime importuoti memo:

import { memo } from 'react';

O dabar atsidarykime konsolę ir paspauskime mygtukus. Visos pastangos veltui! Mes įsiminėme komponentą, bet paspaudus mygtuką 'spustelėti' komponentas Items vis tiek perpiešiamas kiekvieną kartą.

Reikalas tas, kad kai pagrindinis komponentas perpiešiamas, jo funkcijos perkuriamos iš naujo - tai liečia ir mūsų funkciją addItem, kurią perduodame į Items.

Būtent šiuo momentu mums padės vikšras useCallback. Taikykime jį. Pirmiausia importuokime jį į App:

import { useCallback } from 'react';

Tada performuluokime paprastą funkcijos addItem deklaravimą į Funkcijos Išraišką, nurodykime kaip pirmą parametrą useCallback mūsų funkciją atgalinio iškvietimo pavidalu. Antru parametru laužtiniuose skliaustuose nurodykime priklausomybes - visus reaktyvius kintamuosius, dalyvaujančius funkcijoje, mūsų atveju tai masyvas items:

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

Paruošta! Taigi mes užkešavome funkciją. Vėl paspauskime mygtukus ir pamatysime, kad dabar paspaudus mygtuką 'spustelėti' mūsų antrinis komponentas nebesiperpiešia.

Sukurkite komponentą App, įdėkite jį pastraipą su tekstu. Sukurkite būseną su pradine reikšme 'tekstas' ir išveskite ją pastraipoje. Tegul paspaudus ant pastraipos jai į teksto pabaigą pridedamas šauktukas.

Sukurkite antrinį komponentą Products, kuriame turėsite mygtuką naujo produkto pridėjimui. Įdėkite jį į App. Pagrindiniame komponente sukurkite būseną su produktų masyvu ir funkciją pridėjimo naujo produkto. Perduokite juos į antrinį kaip props, išveskite jame perduotą masyvą kaip sąrašą ul.

Products išveskite į konsolę tekstą 'products perpiešiamas'. Apvyniokite Products į memo. Paspaudinėkite ant pastraipos ir mygtuko. Įsitikinkite, kad spustelint ant pastraipos antrinis komponentas vis tiek perpiešiamas.

Užkešuokite funkciją produktų pridėjimui, apvynioję ją į vikšrą useCallback. Paspaudinėkite ant pastraipos ir mygtuko. Įsitikinkite, kad spustelint ant pastraipos, antrinis komponentas nebesiperpiešia.