React တွင် state များ၏ တုံ့ပြန်မှု

ယခု တုံ့ပြန်မှုအလုပ်လုပ်ပုံကို ကြည့်ရအောင်။ ၎င်းသည် state ပြောင်းလဲသောအခါ အပြောင်းအလဲများကို စခရင်ပေါ်တွင် ချက်ချင်း ပြသပေးသည်။

နမူနာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် ထုတ်ကုန်အမည်ဆိုသည့် state တစ်ခုရှိသည်ဆိုပါစို့-

jsxconst [name, setName] = useState('prod');

ထုတ်ကုန်အမည်ကို markup ထဲတွင် ထုတ်ပြကြမည်-

jsxreturn <div>
  <span>{name}</span>
</div>;

ယခု နှိပ်လိုက်သည့်အခါ ကျွန်ုပ်တို့၏ state ပြောင်းလဲသွားမည့် ခလုတ်တစ်ခု ပြုလုပ်ကြမည်-

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

နှိပ်ချက်ကို ကိုင်တွယ်သည့် function ထဲတွင် ထုတ်ကုန်အား အမည်အသစ်သတ်မှတ်ရန် setName function ကို အသုံးပြုမည်-

jsxfunction clickHandler() {
  setName('xxxx');
}

ကုဒ်အားလုံးကို အတူတကွ စုစည်းကြမည်။ ခလုတ်ကိုနှိပ်ပြီးနောက် စာသားသည် ချက်ချင်း တန်ဖိုးအသစ်သို့ ပြောင်းလဲသွားမည်ဖြစ်သည်-

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

သီးခြား နှိပ်ချက်ကိုင်တွယ်သည့် function များ အသုံးပြုရန် မလိုအပ်ပါ။ အမည်မဲ့ arrow function ကို အသုံးပြုနိုင်သည်-

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}