Reactdagi API memo

Keyingi hookni ko‘rib chiqishdan oldin, komponentning prop'lari o‘zgarmaganda qayta renderlanishining oldini olishga yordam beradigan foydali API memoni ham eslatib o‘tishimiz kerak.

Buni misol bilan ko‘rib chiqaylik. Ikkita input maydoni bo‘lgan App komponentini yarataylik, ularga ism va familiya kiritiladi deb faraz qilaylik:

return (
	<div>
		<label>
			ism:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			familiya:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Komponentning boshiga ular uchun state'larni qo‘shamiz:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Yana bir Child.js child komponentini ham yarataylik, u salomlashuv matnini chiqarsin, unda kiritilayotgan ism ko‘rsatilsin. Shuningdek, ushbu komponent har bir renderlanganda konsolda 'child render' satri chiqarilsin:

function Child({ name }) {
	console.log('child render');
	return <h3>Salom {name}!</h3>;
}

Childni asosiy komponentning oxirgi inputdan keyin joylashtiramiz va unga prop sifatida ismni uzatamiz:

<Child name={name} />

Uni asosiy komponentga import qilamiz:

import Child from './Child';

Endi konsolni ochamiz va input maydonlariga ism va familiyani kiritamiz. Bu yerda ko‘ramizki, familiya maydoniga belgilar kiritilganda ham, bizning child komponentimiz har safar qayta chiziladi. Hech qanday muammo yo‘q, chunki bizda kichik komponent. Lekin tasavvur qiling, agar bu komponent ko‘p ma'lumotlarni ko‘rsatgan va shu bilan birga, har safar qayta chizilganida.

Endi esa child komponentni memo ga o‘rab ko‘raylik va rendering qanday o‘zgarishini ko‘rib chiqaylik. Boshlash uchun unga memoni import qilamiz:

import { memo } from 'react';

Keyin yangi o‘zgaruvchi yaratamiz va unga memo ga o‘ralgan Child ni tayinlaymiz. Bizda quyidagi funksional ifoda hosil bo‘ladi:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Salom {name}!</h3>;
});

Konsolni ochamiz va yana ism va familiyani maydonlarga kiritamiz. Hozir ko‘ramizki, familiya kiritilganda, bizning child komponentimiz qayta chizilmaydi.

Esda tutish kerakki, agar o‘zgarmagan prop'lar bilan komponent tomonidan qo‘llaniladigan state'lar yoki o‘zgarishlardan foydalanadigan kontekst o‘zgarsa, bu ishlamaydi.

Ushbu darsda biz qilgan App komponenti kodini oling, unda faqat birinchi inputni qoldiring. React Text komponentini yarating, unda 'uzun matn' matni bo‘lgan abzats bo‘lsin va uni App da inputdan keyin joylashtiring.

Text komponentiga console.log('text render'); qatorini qo‘shing. Inputga belgilar kiritilganda Text komponenti har safar qayta chizilishiga ishonch hosil qiling.

Endi esa Text komponentini memo ga o‘rab qo‘ying. Inputga belgilar kiritilganda Text komponenti qayta chizilmasligiga ishonch hosil qiling.