React дар API memo

Пеш аз он ки мо ҳуки навбатиро дида бароем, зарур аст, ки аз API-и муфид memo ёд кунем, ки ба мо кӯмак мекунад аз таҳрири такрорӣ дар компонент ҷилавгирӣ кунем, агар пропсҳои он тағйир наёбанд.

Биёед инро бо мисол шарҳ диҳем. Биёед компонент App-ро эҷод кунем, ки дар он ду инпут бошад, ки тахминан ном ва насаб дар онҳо ворид карда мешаванд:

return (
	<div>
		<label>
			ном:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			насаб:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Дар аввали компонент барои онҳо стейтҳо илова кунем:

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

Як компоненти фарзандӣ Child.js низ созем, бигзор он саломеро чоп кунад, ки дар он номи воридшаванда намоиш дода мешавад. Ҳамчунин дар консол сатр 'child render' чоп карда мешавад ҳар дафъа, ки ин компонент таҳрир мешавад:

function Child({ name }) {
	console.log('child render');
	return <h3>Салом {name}!</h3>;
}

Child-ро ба верстаи компоненти асосӣ пас аз инпути охирин илова кунем ва ҳамчун пропс номро ба он медиҳем:

<Child name={name} />

Онро ба компоненти асосӣ импорт кунем:

import Child from './Child';

Акнун консолро кушодем ва дар майдони ворид карда ном ва насабро нависем. Дар ин ҷо мо мебинем, ки ҳатто вақте ки рамзҳо ба майдони насаб ворид карда мешаванд, компоненти фарзандии мо ҳар дафъа аз нав тасвир карда мешавад. Ҳеҷ мушкиле нест, зеро компоненти мо хурд аст. Аммо тасаввур кунед, ки агар ин компонент шумораи зиёди маълумотро намоиш медод ва ҳамзамон ҳар дафъа аз нав тасвир мешуд.

Ва акнун биёед компоненти фарзандиро дар memo печонем ва бубинем, ки чӣ гуна таҳрир тағйир мекунад. Барои ибтидо дар он memo-ро импорт кунем:

import { memo } from 'react';

Сипас тағирёбандаи нав созем ва ба он Child-и худро тааллуқ диҳем, ки дар memo печонида шудааст. Дар натиҷа мо ин функсиёнали ифодаро хоҳем дошт:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Салом {name}!</h3>;
});

Консолро кушойем ва боз ном ва насабро дар майдонҳо ворид кунем. Акнун мо мебинем, ки вақте ки насаб ворид карда мешавад, компоненти фарзандии мо аз нав тасвир карда намешавад.

Бояд ба хотир дошт, ки ин кор намекунад, агар бо пропсҳои тағйирнаёфта стейтҳое тағйир кунанд, ки компонент истифода мебарад ё контекст, ки тағйирот истифода мебарад.

Рамзи компоненти App-ро гиред, ки мо дар ин дарс сохта будем, танҳо инпути аввалинро дар он гузоред. Компоненти React Text-ро эҷод кунед, ки абзасе бо матни 'матни дароз' дар бар гирад, ва онро дар App пас аз инпут ҷойгир кунед.

Дар компоненти Text сатри console.log('text render'); илова кунед. Боварӣ ҳосил кунед, ки ҳангоми ворид кардани рамзҳо ба инпут компоненти Text ҳар дафъа аз нав тасвир карда мешавад.

Ва акнун компоненти Text-ро дар memo печонед. Боварӣ ҳосил кунед, ки ҳангоми ворид кардани рамзҳо ба инпут компоненти Text такрорӣ аз нав тасвир карда намешавад.