Reactdagi useCallback Unumdorlikni Optimallashtirish Huki

Ushbu darsda biz quyidagi unumdorlikni optimallashtirish hooki useCallbackni ko'rib chiqamiz.

useCallback hooki useMemo APIga o'xshaydi, farqi shundaki, birinchi ekran qayta chizilishlari orasida qiymatni keshlaydi, ikkinchisi esa - callbackni. Bu bizga qimmatbaho funksiyalarni talab qilinmaganda qayta ishga tushirmaslik imkonini beradi va funksiyani uzatishda bola komponentlarga ishlatilishi mumkin.

Keling, misol orqali batafsilroq tushunaylik. Boshlash uchun App komponentini yaratamiz va uning ichida num holatini yaratamiz:

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

Keling, bizda bosish orqali num oshadigan tugma bo'lsin 1, va biz num qiymatini ko'rsatadigan paragraf bo'lsin:

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

Endi, faraz qilaylik, bizda App da yana boshqa tugma bosish orqali to'ldiriladigan elementlar ro'yxati chiqariladi. Ushbu ro'yxat elementlarini saqlash uchun biz items holatini yaratamiz:

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

Keyin ularni qo'shish uchun addItem funksiyasini yozamiz:

function addItem() {
	setItems([...items, 'yangi element']);
}

Endi keling, ro'yxat elementlarini ko'rsatish uchun kod yozamiz va uni Items bola komponentiga chiqaramiz, u prop sifatida elementlar massivi va ularni qo'shish funksiyasini oladi. Items qachon qayta chizilishini ko'rish uchun konsolga chiqarishni unutmaylik:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items qayta chizilmoqda');
	
	return (
		<div>
			<h3>Bizning elementlarimiz</h3>
			{result}
			<button onClick={addItem}>element qo'shish</button>
		</div>
	);
}

export default Items;

Keling, Items ni App komponenti oxiriga joylashtiramiz va unga items massivi va elementlar qo'shish funksiyasi addItem ni uzatamiz:

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

Endi keling, tugmachalarni bosib ko'raylik va num oshayotganiga va ro'yxatga yangi elementlar qo'shilayotganiga ishonch hosil qilaylik. Konsolni ochib, biz ro'yxatimiz har safar qayta chizilayotganini ko'ramiz, hatto num ni oshiradigan tugmani bossak ham.

Agar bizda kichik ro'yxat bo'lsa, hammasi yaxshi, lekin agar u katta hajmli bo'lishi kutilayotgan bo'lsa va u erda yana ko'p narsalar bo'lsa-chi? Muammo yo'q - deysiz, chunki o'tgan darsda biz memo API ni ko'rib chiqdik, aynan keraksiz qayta chizishlarning oldini olish uchun.

Shunday qilaveraylik, Items komponentimizni memo ga o'rashimiz va hammasi joyida. Aytgancha, buni Items ni eksport qilishda to'g'ridan-to'g'ri qilish mumkin:

export default memo(Items);

memo ni import qilishni unutmaylik:

import { memo } from 'react';

Endi konsolni ochaylik va tugmachalarni bosaylik. Barcha sa'y-harakatlar behuda! Biz komponentni memoizatsiya qildik, lekin 'bosish' tugmasini bosganimizda Items komponenti baribir har safar qayta chizilmoqda.

Masala shundaki, ota komponent qayta chizilganda, uning funksiyalari qaytadan yaratiladi - bu bizning Items ga uzatayotgan addItem funksiyamizga ham tegishli.

Aynan shu payt bizga useCallback hooki yordam beradi. Keling, uni qo'llaylik. Boshlash uchun uni App ga import qilamiz:

import { useCallback } from 'react';

Keyin oddiy addItem funksiya e'lonini Function Expression ga o'zgartiramiz, useCallback uchun birinchi parametr sifatida funksiyamizni callback ko'rinishida ko'rsatamiz. Ikkinchi parametr sifatida to'rtburchak qavslar ichida bog'liqliklarni ko'rsatamiz - funksiyada qatnashadigan barcha reaktiv o'zgaruvchilar, bizning holatda bu items massivi:

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

Tayyor! Shunday qilib, biz funksiyani keshladik. Yana tugmachalarni bosamiz va 'bosish' tugmasini bosishda endi bola komponentimiz qayta chizilmasligini ko'ramiz.

App komponentini yarating, uning ichiga matnli paragraf joylashtiring. Boshlang'ich qiymati 'matn' bo'lgan holat yarating va uni paragrafda chiqaring. Paragrafga bosilganda uning oxiriga undov belgisi qo'shilsin.

Products bola komponentini yarating, unda sizda yangi mahsulot qo'shish uchun tugma bo'lsin. Uni App da joylashtiring. Ota komponentda mahsulotlar massivi bilan holat yarating va yangi mahsulot qo'shish funksiyasini yarating. Ularni prop sifatida bola komponentga uzating, unda uzatilgan massivni ul ro'yxati ko'rinishida chiqaring.

Products da konsolda 'products qayta chizilmoqda' matnini chiqaring. Products ni memo ga o'rang. Paragraf va tugmani bosing. Paragrafga bosilganda bola komponent baribir qayta chizilishiga ishonch hosil qiling.

Mahsulot qo'shish funksiyasini useCallback hooki orasiga olib, keshlang. Paragraf va tugmani bosing. Paragrafga bosilganda, bola komponent endi qayta chizilmasligiga ishonch hosil qiling.