API memo React

Pirms mēs apskatām nākamo āķi, ir jāpiemin arī noderīgais API memo, kas mums palīdz izvairīties no komponenta atkārtotas renderēšanas, ja tā props paliek nemainīgi.

Izskatīsim to ar piemēru. Izveidosim komponentu App, kurā būs divi ievades lauki, kuros, pieņemsim, tiek ievadīts vārds un uzvārds:

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

Sākumā komponentam pievienosim stāvokļus (state) tiem:

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

Izveidosim arī apakšējo komponentu Child.js, lai tas izvada sveicienu, kurā tiks rādīts ievadītais vārds. Arī konsolē tiks izvadīta virkne 'child render' pie katras šī komponenta renderēšanas:

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

Pievienosim Child galvenā komponenta veidolā pēc pēdējā ievades lauka un kā propu (props) nodosim tam vārdu:

<Child name={name} />

Importēsim to galvenajā komponentā:

import Child from './Child';

Tagad atvērsim konsoli un ievades laukos ierakstīsim vārdu un uzvārdu. Šeit mēs redzēsim, ka pat ievadot simbolus uzvārda laukā, mūsu apakšējais komponents tiks pārzīmēts katru reizi. Nav nekādu problēmu, jo mums ir mazs komponents. Bet iedomājieties, ja šis komponents attēlotu lielu datu daudzumu un tajā pašā laikā, katru reizi tiktu pārzīmēts.

Tagad ietīsim apakšējo komponentu memo iekšā un paskatīsimies, kā mainīsies renderēšana. Sākumā importēsim tajā memo:

import { memo } from 'react';

Pēc tam izveidosim jaunu mainīgo un piešķirsim tam mūsu Child, ietītu memo iekšā. Mēs iegūsim sekojošu funkcionālo izteiksmi:

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

Atvērsim konsoli un atkal ievadīsim vārdu un uzvārdu laukos. Tagad mēs redzam, ka, ievadot uzvārdu, mūsu apakšējais komponents netiek pārzīmēts.

Jāatceras, ka tas nedarbosies, ja pie nemainīgiem propiem mainīsies komponentā izmantotie stāvokļi (state) vai konteksts, kas izmanto izmaiņas.

Paņemiet komponenta App kodu, ko mēs izveidojām šajā nodarbībā, atstājiet tajā tikai pirmo ievades lauku. Izveidojiet React komponentu Text, kas satur rindkopu ar tekstu 'long text', un ievietojiet to App pēc ievades lauka.

Komponentā Text pievienojiet rindiņu console.log('text render');. Pārliecinieties, ka ievadot simbolus ievades laukā, komponents Text tiek pārzīmēts katru reizi.

Tagad ietīet komponentu Text memo iekšā. Pārliecinieties, ka, ievadot simbolus ievades laukā, komponents Text netiek pārzīmēts atkārtoti.