API memo-ն React-ում

Նախքան հաջորդ հուկին անցնելը, անհրաժեշտ է նշել նաև օգտակար API-ի memo մասին, որն օգնում է մեզ խուսափել կոմպոնենտի կրկնվող ռենդերից, եթե նրա պրոպսերը մնում են անփոփոխ:

Եկեք դիտարկենք դա օրինակով: Ստեղծենք App կոմպոնենտ, որում կլինեն երկու ինպուտ, որոնցում, ենթադրենք, մուտքագրվում են անունը և ազգանունը:

App.jsxreturn (
  <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>
);

Դրա սկզբում ավելացնենք ստեյթեր դրանց համար:

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

Կազմենք նաև Child.js երեխայի կոմպոնենտ, թող այն ցուցադրի բարևում, որում կցուցադրվի մուտքագրված անունը: Նաև կոնսոլում կտպվի տող 'child render' այս կոմպոնենտի յուրաքանչյուր ռենդերին:

Child.jsxfunction Child({ name }) {
  console.log('child render');
  return <h3>Բարև {name}!</h3>;
}

Ավելացնենք Child հիմնական կոմպոնենտի վերստում վերջին ինպուտից հետո և որպես պրոպս կփոխանցենք դրան անունը:

App.jsx<Child name={name} />

Իմպորտ անենք այն հիմնական կոմպոնենտում:

App.jsximport Child from './Child';

Իսկ հիմա բացենք կոնսոլը և ինպուտների դաշտերում մուտքագրենք անունն ու ազգանունը: Այստեղ մենք կտեսնենք, որ նույնիսկ ազգանունի դաշտում նիշեր մուտքագրելիս, մեր երեխայի կոմպոնենտը ամեն անգամ կվերագծվի: Ոչ մի խնդիր, քանի որ մենք ունենք փոքր կոմպոնենտ: Բայց պատկերացրեք, եթե այս կոմպոնենտը ցուցադրեր մեծ քանակությամբ տվյալներ և այդ ընթացքում, ամեն անգամ վերագծվեր:

Իսկ հիմա եկեք փաթաթենք երեխայի կոմպոնենտը memo-ի մեջ և տեսնենք, թե ինչպես կփոխվի ռենդերումը: Նախ իմպորտ անենք դրա մեջ memo:

Child.jsximport { memo } from 'react';

Այնուհետև ստեղծենք նոր փոփոխական և վերագրենք մեր Child-ը, փաթաթված memo-ի մեջ: Մենք կստանանք հետևյալ ֆունկցիոնալ արտահայտությունը:

Child.jsxconst Child = memo( function Child({ name }) {
  console.log('child render');
  return <h3>Բարև {name}!</h3>;
});

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

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