Reactdagi useMemo unumdorlikni optimallashtirish huki

Biz ko'rib chiqadigan birinchi unumdorlikni optimallashtirish huki - bu useMemo.

Ushbu huk ekran qayta chizishlar orasida resurs talab qiluvchi operatsiyalar natijalarini keshlashga yordam beradi va shu bilan keraksiz hajmli hisob-kitoblarning oldini olishga yordam beradi. Bunday keshlash memoisatsiya deb ham ataladi.

Keling, bu qanday ishlashini ko'rib chiqaylik. Keling, tugma va h3 sarlavhasi bilan komponent yarataylik:

return (
	<div>
		<h3>Matn</h3>
		<button>bosish</button>
	</div>
);

Endi sarlavhani bosganda uning rangi oranjidan yashil rangga va aksincha o'zgarishi uchun qilaylik. Boshlash uchun isGreen holatini yaratamiz:

const [isGreen, setIsGreen] = useState(false);

Sarlavhaning style atributiga sarlavha rangining o'zgarish shartini qo'shamiz va bosish ishlovchisini qo'shamiz:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Matn</h3>

Shuningdek, bizning tugmachamizni bosganda birlik bilan o'sadigan qandaydir qiymat bo'lsin. Uni uchun holat yaratamiz:

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

Tugmani bosishni qayta ishlashni qo'shamiz:

<button onClick={() => setNum(num + 1)}>
	bosishlar
</button>

Shuningdek, bizda num qiymatining kvadratini qaytaradigan square funksiyasi bo'lsin. Funksiyani chaqirish natijasini biz result o'zgaruvchisiga yozamiz:

const result = square(num);

function square(num) {
	return num * num;
}

result ni tugma matnida ko'rsatamiz:

<button onClick={() => setNum(num + 1)}>
	bosishlar: {result}
</button>

Natijada bizda quyidagi natija chiqdi: tugmani bosganda num qiymati o'zgaradi, keyin u kvadratga ko'tariladi, sarlavhani bosganda esa sarlavha rangi o'zgaradi.

Bizning komponentimiz juda kichik, hamma narsa ishlaydi tez, sarlavhani bosganda uning rangi o'zgarganda butun komponent qayta chizilishi, shu bilan bog'liq holda hisob-kitoblar ham qaytadan bajariladi, bu tugmaga biz tegmasak ham. A endi tasavvur qiling, agar bizning hisob-kitoblarimiz hajmli bo'lsa va hamma narsa har safar qaytadan hisoblanganda.

Keling, funksiyamizni biroz og'irlashtiramiz, endi u biroz ko'proq o'ylaydi. Shu tarzda biz uzoq davom etadigan hisob-kitoblarni simulyatsiya qilamiz:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Hech narsa qilmang ...
	}
	
	return num * num;
}

Endi sarlavhani bosing. Ma'lum bo'lishicha, endi funksiyaning uzoq ishlashi tufayli square (lekin biz tugmaga tegmaymiz) sarlavha rangi o'zgashi uchun biz butun abadiy kutishimiz kerak!

Bu erda useMemo huki yordamga keladi. Buning uchun, birinchi parametr sifatida biz keshlashni xohlaydigan qiymatni hisoblaydigan funksiyani uzatishimiz kerak, ushbu funksiya toza bo'lishi kerak va hech qanday parametr qabul qilmasligi kerak. Ikkinchi parametr sifatida - to'rtburchak qavs ichidagi bog'liqliklar, boshqacha qilib aytganda, kodda ishtirok etadigan barcha reaktiv qiymatlar. Shunday qilib, result ga endi biz shunday konstruksiyani yozamiz:

const result = useMemo(() => square(num), [num]);

Yana sarlavhani bosing. Endi, agar biz hisob-kitoblar tugmasini tegmasek va shu tarzda holat qiymatini o'zgartirmasak num, hech narsa qayta hisoblanmaydi, va React keshlangan qiymatni ko'rsatadi tugmada, shuning uchun bizning sarlavhamiz tezda o'z rangini o'zgartiradi.

App komponentini yarating, joylashtiring uning ichida abzas bo'lsin. text holatini yarating boshlang'ich qiymati 'react' bo'lgan, holat qiymati ko'rsatilsin abzas matni sifatida. Abzasni bosganda unga matn oxirida undov belgisi qo'shilsin.

Yana bir num holatini yarating, boshlang'ich qiymati 0 bo'lgan. Ichiga joylashtiring App da yana bir abzas. Shunday qilingki, unga bosilganda num 1 ga oshadi.

Endi App ga funksiya qo'shing triple, u parametr sifatida num ni qabul qiladi va uning uch baravar qiymatini qaytaradi. Funksiya chaqiruvi natijasini result o'zgaruvchisiga qo'ying. result ni ikkinchi abzas matni sifatida ko'rsating. Navbatma-navbat abzarlarni bosing, undov belgilari qanchalik sekin qo'shilishini qayd eting.

Vaziyatni tuzating, sekin funksiyani triple ni useMemo ga o'rash orqali.