React'теги memo API

Кийинки хуктү карап чыкмас мурун, пайдалуу 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>Hello {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>Hello {name}!</h3>;
});

Консолду ачып, дагы бир жолу талааларга ат жана фамилияны киргизе баштайбыз. Азыр биз фамилияны киргизгенде, биздин башка компонент кайрадан чирилбей тургандыгын көрөбүз.

Мунун иштейбилиши үчүн, өзгөрбөгөн пропстар менен компонент колдонгон стейттер же контекст өзгөрсө, иштебей тургандыгын унутпоо керек.

Бул сабакта жасаган App компонентинен кодун алыңыз, анда биринчи кириш талаасын гана калтырыңыз. React компонентин Text түзүңүз, ал 'узун текст' тексти бар абзацты камтыйт, жана аны App ке кириш талаасынан кийин жайгаштырыңыз.

Text компонентинде console.log('text render'); сабын кошуңуз. Кириш талаасына белгилерди киргизгенде Text компоненти ар жолу кайрадан чирилгенине ынаныңыз.

Эми Text компонентин memo ге ороп коюңуз. Кириш талаасына белгилерди киргизгенде Text компоненти кайрадан чирилбей тургандыгына ынаныңыз.