API memo-ն React-ում

Նախքան հաջորդ հուկին անցնելը, անհրաժեշտ է նշել նաև օգտակար 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>Բարև {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>Բարև {name}!</h3>;
});

Բացենք կոնսոլը և նորից մուտքագրենք անունն ու ազգանունը դաշտերում: Հիմա մենք տեսնում ենք, որ ազգանուն մուտքագրելիս, մեր երեխայի կոմպոնենտը չի վերագծվում:

Պետք է հիշել, որ դա չի աշխատի, եթե անփոփոխ պրոպսերի դեպքում կփոխվեն կոմպոնենտի կողմից օգտագործվող ստեյթերը կամ փոփոխություններ օգտագործող կոնտեքստը:

Վերցրեք App կոմպոնենտի կոդը, որը մենք արեցինք այս դասին, թողեք դրանում միայն առաջին ինպուտը: Ստեղծեք React կոմպոնենտ Text, որը պարունակում է պարագրաֆ 'long text' տեքստով, և տեղադրեք այն App-ում ինպուտից հետո:

Text կոմպոնենտում ավելացրեք տող console.log('text render');: Համոզվեք, որ ինպուտում նիշեր մուտքագրելիս Text կոմպոնենտը վերագծվում է ամեն անգամ:

Իսկ հիմա փաթաթեք Text կոմպոնենտը memo-ի մեջ: Համոզվեք, որ ինպուտում նիշեր մուտքագրելիս Text կոմպոնենտը չի վերագծվում կրկնակի: