API memo Reactis

Enne kui vaatame järgmist hooki, on vaja mainida ka kasulikku API-d memo, mis aitab meil vältida komponendi uuesti renderdamist, kui selle propsid jäävad muutumatuteks.

Vaatame seda näite varal. Loome komponendi App, kus on kaks input välja, kuhu sisestatakse eeldatavalt ees- ja perekonnanimi:

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

Lisame komponendi algusse state-id nende jaoks:

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

Teeme veel ja lapsekomponendi Child.js, las ta kuvab tervituse, kus kuvatakse sisestatav nimi. Samuti kuvatakse konsoolis string 'child render' iga selle komponendi renderdamise korral:

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

Lisame Child põhikomponendi veeru viimase inputi järele ja anname prop-sina edasi talle nime:

<Child name={name} />

Impordime selle põhikomponenti:

import Child from './Child';

Nüüd avame konsooli ja hakkame input väljadesse sisestama nime ja perekonnanime. Siin näeme, et isegi sümbolite sisestamisel perekonnanime väljale, meie lapsekomponent renderdatakse iga kord uuesti. Pole probleemi, kuna meil on väike komponent. Kuid kujutage ette, kui see komponent kuvaks suurt hulka andmeid ja samal ajal renderduks iga kord uuesti.

Nüüd aga mähime lapse komponendi memo sisse ja vaatame, kuidas renderdamine muutub. Alustuseks impordime sellesse memo:

import { memo } from 'react';

Seejärel loome uue muutuja ja anname sellele meie Child, mähitud memo sisse. Meil saab järgmine funktsiooniavaldis:

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

Avame konsooli ja hakkame uuesti sisestama nime ja perekonnanime väljadesse. Nüüd näeme, et perekonnanime sisestamisel, meie lapsekomponent ei renderdu uuesti.

Tuleb meeles pidada, et see ei tööta, kui muutumatute propside korral muutuvad state-id, mida komponent kasutab või kontekst, mis kasutab muutusi.

Võtke komponendi App kood, mida me selles tunnis tegime, jätke sinna ainult esimene input. Looge React komponent Text, mis sisaldab lõigu tekstiga 'long text', ja paigutage see App sisse inputi järele.

Komponendis Text lisage rida console.log('text render');. Veenduge, et sümbolite sisestamisel inputi komponent Text renderdub iga kord uuesti.

Nüüd mähige komponent Text memo sisse. Veenduge, et sümbolite sisestamisel inputi komponent Text ei renderdu uuesti.