API memo in React

Voordat ons die volgende hoek oorweeg, is dit nodig om die nuttige API memo te noem, wat ons help om die herhaalde weergawe van 'n komponent te vermy, as sy props onveranderd bly.

Kom ons verduidelik dit met 'n voorbeeld. Laat ons 'n komponent App skep, waarin twee insettevelde sal wees, waar ons, laat ons sê, 'n naam en van invoer:

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

Laat ons aan die begin van die komponent state vir hulle byvoeg:

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

Laat ons ook 'n kinderkomponent skep Child.js, laat dit 'n groet uitskryf, waarin die ingevoerde naam vertoon sal word. Ook sal 'n string 'child render' in die konsole uitgevoer word met elke weergawe van hierdie komponent:

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

Laat ons Child by die opmaak van die hoof komponent na die laaste insetveld byvoeg en ons sal dit as 'n prop aan hom deurgee:

<Child name={name} />

Laat ons dit in die hoofkomponent inbring:

import Child from './Child';

En nou laat ons die konsole oopmaak en in die insetvelde 'n naam en van intik. Hier sal ons sien dat selfs wanneer ons karakters in die veld vir die van invoer, sal ons kinderkomponent elke keer herteken word. Geen probleme nie, want ons het 'n klein komponent. Maar stel jou voor, as hierdie komponent 'n groot hoeveelheid data vertoon het en terselfdertyd, elke keer herteken word.

En nou laat ons die kinderkomponent in memo toedraai, en kyk hoe die weergawe verander. Eers moet ons memo daarin inbring:

import { memo } from 'react';

Dan skep ons 'n nuwe veranderlike en ken ons ons Child daaraan toe, toegedraai in memo. Ons sal die volgende funksionele uitdrukking kry:

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

Laat ons die konsole oopmaak en weer naam en van in die velde invoer. Nou sien ons dat wanneer ons die van invoer, ons kinderkomponent nie herteken word nie.

Onthou dat dit nie sal werk nie, as met onveranderde props die state, wat deur die komponent gebruik word, sal verander of die konteks, wat veranderinge gebruik.

Neem die kode van die komponent App, wat ons in hierdie les gemaak het, laat net die eerste insetveld daarin oor. Skep 'n React komponent Text, wat 'n paragraaf met die teks 'long text' bevat, en plaas dit in App na die insetveld.

Voeg in die komponent Text die reël console.log('text render'); by. Maak seker dat wanneer karakters in die insetveld ingevoer word, die komponent Text elke keer herteken word.

En nou draai die komponent Text in memo toe. Maak seker dat wanneer karakters in die insetveld ingevoer word, die komponent Text nie weer herteken word nie.