React-daky performansi optimizasiýa gurşagy useCallback

Bu sapakda biz performansy optimizasiýa etmek üçin aşakdaky gurşagy gözden geçireris useCallback.

useCallback gurşagy API useMemo-a meňzeýär, özgerişi şonda, birinjisi ekran täzeden çyzylýan wagtynda bahany keşirýär, ikinjisi bolsa - call-back. Bu bize mümkin bolmadyk wagtynda resurs talap edýän funksiýalary täzeden işletmekden saklanmaga mümkinçilik berýär we funksiýany bermek çaga komponentlerinde ulanmak mümkin.

Geliň mysal üsti bilen giňişleýin düşüneliň. Ilki bilen komponent App döredeliň we onda ýörite ýagdaý num goýuň:

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

Geliň bir düwmämiz bolsun, basmak bilen num artyp 1 we bir abzas, onda biz num-yň bahasyny çykararys:

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

Indi bolsa, guman edeliň, bizde App-da başga bir sanaw elementler bilen çykarylýar, biz oňa goşup başga bir düwmäni basmak bilen. Bulary saklamak üçin ýörite ýagdaý items goýarys:

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

Soň bolsa addItem funksiýasyny ýazarys olary goşmak üçin:

function addItem() {
	setItems([...items, 'täze element']);
}

Indi bolsa görkezme üçin kody ýazalyň sanawyň elementlerini we ony çaga komponent Items-a çykaralyň, görnüşinde ýollary elementleriň sanawyny we olary goşmak üçin funksiýany alyar. Unutman konsol çykaryşyny goşuň, ýörite ýagdaý Items haçan täzeden çyzylýandygy görmek üçin:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});

	console.log('Items täzeden çyzylýar');

	return (
		<div>
			<h3>Biz elementler</h3>
			{result}
			<button onClick={addItem}>element goş</button>
		</div>
	);
}

export default Items;

Items-y komponentiň ahyrynda ýerleşdiriň App we oňa sanawy beriň items we elementleri goşmak üçin funksiýa addItem:

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

Indi düwmeleri basyp görüň we num ösýändigine we täze elementler sanawa goşulýandyklaryna göz ýetiriň. Konsoly açanymyzda, göreris biziň sanawymyz her gezek täzeden çyzylýar, hatta biz düwmä basanymyzda, num-y artdyrýan.

Eger kiçi sanaw bolsa, hemmesi gowy, eger guman edilse, ol köpçülikleýin bolup, onda köp zat bar bolsa? Eziz däl - size diýer, sebäbi öňki sapakda biz API memo gözden geçirdik, komponentiň zerur bolmadyk täzeden çyzylmalaryndan saklanmak üçin.

Şeýlelik bilen, biz komponenti Items-y memo-a gurup işleriň hemmesini edeliň. Bu ýerde hem derrew edip bolýar Items-y eksport edende:

export default memo(Items);

memo-y import etmegi unutman:

import { memo } from 'react';

Indi konsoly açalyň we düwmeleri basyp görüň. Heziller boşuna! Biz komponenti ýatladýan, emma düwmäni basmak bilen 'bas' komponent Items her gezek täzeden çyzylýar.

Sebäbi şonda, ata komponent täzeden çyzylýanda, onuň funksiýalary täzeden döredilýär - bu biziň funksiýamyza addItem, üstünlikli berýäris Items.

Şu wagt bize gurşak kömek eder useCallback. Geliň ulanýalyň. Ilki bilen ony import edeliň App:

import { useCallback } from 'react';

Soň bolsa ýöne funksiýanyň deklarasiýasyny üýtgedeliň addItem Funksiýa ekspressiýasy, birinji parametr hökmünde görkezeliň useCallback üçin funksiýamyzy call-back görnüşinde. Ikinji parametr hökmünde çyzykly ähmiýetli möhürde görkezeliň baglylyklary - hemmesi reaksiýa ediji üýtgeýänler, funksiýada gatnaşýan, bizde sanaw items:

const addItem = useCallback(() => {
	setItems(() => [...items, 'Täze element']);
}, [items]);

Taýýar! Şeýlelik bilen, biz funksiýany ýatladýan. Düwmeleri täzeden basyp görüň we indi düwmäni basmak bilen görüň 'bas' biz çaga komponent täzeden çyzylmaýar.

Komponent dörediň App, goýuň onda bir tekstli abzas. Goýuň ýörite ýagdaý başlangyç bahasy bilen 'tekst' we ony abzasynda çykaryň. Abzasa basmak bilen oňa tekst ahyrynda goşulýan ýagdaý.

Çaga komponent dörediň Products, onda size düwme bolar täze öndüriji goşmak üçin. Ony App-a ýerleşdiriň. Ata komponentde ýörite ýagdaý dörediň öndürijileriň sanawy bilen we täze goşmak üçin funksiýa öndürijini. Olary ýollary hökmünde beriň çagada, oňa berlen sanawy şu ýerde çykaryň sanawy görnüşinde ul.

Products-da konsola tekst çykaryň 'öndürijiler täzeden çyzylýar'. Products-y memo-a guryň. Abzasa we düwmäni basyp görüň. Göz ýetiriň, abzasa basmak bilen çaga komponent şonda hem täzeden çyzylýar.

Öndürijileri goşmak üçin funksiýany ýatladýan, ony gurşaga gurup useCallback. Abzasa we düwmäni basyp görüň. Göz ýetiriň, abzasa basmak bilen, çaga komponent artyk täzeden çyzylmaýar.