React-daky memo API-si

Indiki gogy gözden geçirmezden ozal, komponentiň proplary üýtgemeýän bolsa, onuň gaýtadan renderlenmeginden gaça durmaga kömek edýän peýdaly memo API-syny ýatlap geçmek gerek.

Mysal bilen düşünip göreli. App komponentini döretäýin, onda iki input bolsun, diýeliň, olara ad we familiýa girizilýär:

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

Komponentiň başyna olar üçin ýagdaýlar (state) goşalyň:

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

Ýene bir çagalaryň (child) komponentini döretäýin Child.js, onuň girişilýän ady görkezýän salamlaşyk ýazsyn. Şeýle hem her gezek bu komponent renderlenende konsolda 'child render' setiri görkezilsin:

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

Child-ni esasy komponentiň wersiýasyna iň soňky input-dan soň goşalyň we prop hökmünde ona ady ýollalyň:

<Child name={name} />

Ony esasy komponente import edeliň:

import Child from './Child';

Indi konsoly açalyň we input meýdanlaryna ady we familiýany girizeliň. Bu ýerde biz familiýa üçin meýdana nyşanlar girizenimizde-de, biziň çagalaryň komponentimiziň her gezek gaýtadan çekilýändigini göreris. Problem ýok, sebäbi biziň kiçijik komponent. Emma bu komponent köp sanly maglumat görkezýän bolsa we şol bir wagtyň özünde, her gezek gaýtadan çekilse nähili bolardy?

Indi bolsa çagalaryň komponentini memo-a geçiräýin we renderleşmegiň nädip üýtşändigine göz aýlapaýyň. Başlangyç hökmünde ona memo-y import edeliň:

import { memo } from 'react';

Soňra täze üýtgeýjini (variable) döret we ona memo-a geçirilen biziň Child-y bellä. Bizde aşakdaky funksional ifade ýüze çykar:

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

Konsoly açalyň we ýenede meýdanlara ady we familiýany girizeliň. Indi biz familiýa girizenimizde, biziň çagalaryň komponentimiziň gaýtadan çekilmeýändigini görýäris.

Proplary üýtgemeýän bolsa-da, komponent tarapyndan ulanylýan ýagdaýlaryň (state) ýa-da üýtgemeleri ulanýan kontekstiň üýtgeýän bolsa, bu işlemez.

Bu sapakda etdik biziň App komponent kodyny alyň, onda diňe birinji inputy goýuň. React komponenti Text dörediň, onuň içinde 'uzyn tekst' tekstli abzas bolsun we ony App-da input-dan soň ýerleşdiriň.

Text komponentine console.log('text render'); setirini goşuň. Input-a nyşan girizenimizde Text komponentiniň her gezek gaýtadan çekilýändigine göz ýetiriň.

Indi bolsa komponenti Text-y memo-a geçiriň. Input-a nyşan girizenimizde Text komponentiniň gaýtadan çekilmeýändigine göz ýetiriň.