React တွင် API memo ကိုအသုံးပြုခြင်း

နောက် hook တစ်ခုကို မစဉ်းစားခင်၊ component ၏ props များမပြောင်းလဲပါက ထပ်ခါထပ်ခါ render လုပ်ခြင်းမှ ရှောင်ရှားရန် ကူညီပေးသည့် အသုံးဝင်သော API memo ကို ဖော်ပြရန်လိုအပ်ပါသည်။

ဥပမာတစ်ခုဖြင့် စမ်းကြည့်ကြပါစို့။ App component တစ်ခုကို ဖန်တီးမည်၊ ထို component တွင် input နှစ်ခုပါဝင်မည်၊ ၎င်းတို့ထဲတွင် အမည်နှင့် မိသားစုအမည်ကို ရိုက်ထည့်သည်ဟု ယူဆပါစို့။

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>
);

Component ၏အစတွင် ၎င်းတို့အတွက် state များကို ထည့်သွင်းပါမည်။

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

ထို့အပြင် ခေါ်ယူသုံးစွဲမည့် component Child.js ကိုလည်း ဖန်တီးကြည့်ပါမည်၊ ၎င်းက နှုတ်ခွန်းဆက်စကားကို ပြသပါစေ၊ ထိုနှုတ်ခွန်းဆက်စကားတွင် ရိုက်ထည့်သော အမည်ကို ဖော်ပြပါမည်။ ထို့အပြင် ဤ component render လုပ်သည့်အခါတိုင်း console တွင် စာသား 'child render' ကို ထုတ်ပြပါမည်။

Child.jsxfunction Child({ name }) {
  console.log('child render');
  return <h3>မင်္ဂလာပါ {name}!</h3>;
}

Child ကို အဓိက component ၏ ဖွဲ့စည်းပုံတွင် နောက်ဆုံး input ၏ နောက်မှ ထည့်သွင်းပါမည် ထို့အပြင် props အဖြစ် အမည်ကို လွှဲပေးပါမည်။

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

၎င်းကို အဓိက component ထဲသို့ တင်သွင်းပါမည်။

App.jsximport Child from './Child';

ယခု console ကိုဖွင့်ပြီး input အကွက်များထဲတွင် အမည်နှင့် မိသားစုအမည်ကို ရိုက်ထည့်ကြည့်ပါ။ ဤနေရာတွင် မိသားစုအမည်အတွက် အကွက်ထဲသို့ စာလုံးများ ရိုက်ထည့်သည့်အချိန်တိုင်းတွင် ကျွန်ုပ်တို့၏ ခေါ်ယူသုံးစွဲသည့် component သည် အကြိမ်တိုင်း ပြန်လည်ရေးဆွဲခံရမည်ကို တွေ့ရပါမည်။ ပြဿနာမရှိပါ၊ အဘယ့်ကြောင့်ဆိုသော် ကျွန်ုပ်တို့တွင် component သေးသေးလေးရှိသောကြောင့်ဖြစ်သည်။ သို့သော် ဤ component သည် ဒေတာအများအပြားကို ပြသပြီး ထိုအချိန်တိုင်းတွင် ပြန်လည်ရေးဆွဲခံရမည်ဆိုလျှင် မည်သို့ဖြစ်မည်ကို စဉ်းစားကြည့်ပါ။

ယခု ခေါ်ယူသုံးစွဲသည့် component ကို memo ဖြင့် ထည့်သွင်းလိုက်ပြီး၊ render လုပ်ပုံ မည်သို့ပြောင်းလဲသွားသည်ကို ကြည့်ကြပါစို့။ ပထမဦးစွာ ၎င်းထဲသို့ memo ကို တင်သွင်းပါမည်။

Child.jsximport { memo } from 'react';

ထို့နောက် variable အသစ်တစ်ခု ဖန်တီးပြီး ကျွန်ုပ်တို့၏ Child ကို memo ဖြင့် ထည့်သွင်းထားသောအရာကို တန်ဖိုးသတ်မှတ်ပေးပါမည်။ ကျွန်ုပ်တို့၏ ရလဒ်မှာ အောက်ပါ function expression ဖြစ်လာပါမည်။

Child.jsxconst Child = memo( function Child({ name }) {
  console.log('child render');
  return <h3>မင်္ဂလာပါ {name}!</h3>;
});

Console ကိုဖွင့်ပြီး အကွက်များထဲသို့ အမည်နှင့် မိသားစုအမည်ကို ထပ်မံရိုက်ထည့်ကြည့်ပါ။ ယခုအချိန်တွင် မိသားစုအမည်ကို ရိုက်ထည့်သည့်အခါ၊ ကျွန်ုပ်တို့၏ ခေါ်ယူသုံးစွဲသည့် component သည် ပြန်လည်ရေးဆွဲခြင်းမခံရတော့သည်ကို တွေ့ရပါမည်။

ဤအရာသည် အလုပ်မလုပ်ပါ၊ အကယ်၍ props များမပြောင်းလဲသော်လည်း component မှအသုံးပြုသော state များ သို့မဟုတ် ပြောင်းလဲမှုများကိုအသုံးပြုသော context များ ပြောင်းလဲနေပါက မှတ်သားထားရန်လိုအပ်ပါသည်။