React တွင် useEffect ၏ မှီခိုရာများ

ယခု ခလုတ်တစ်ခုကို နှိပ်လိုက်သည်နှင့် အရောင်ပြောင်းသည့် လုပ်ဆောင်ချက်ကို လုပ်ဆောင်ကြပါစို့။ အစမှတ်တစ်ခုသတ်မှတ်ပေးလျက် color ဟုခေါ်သော state တစ်ခုကို အရောင်အတွက် ဖန်တီးပါမည်။

App.jsxconst [color, setColor] = useState('green');

useEffect အတွင်းရှိ စာကြောင်းတန်ဖိုးကို ကျွန်ုပ်တို့၏ state ဖြင့် အစားထိုးပြီး စတုရန်းကွင်းစတုရန်းကွင်းချပ်အတွင်းရှိ မှီခိုရာစာရင်းထဲသို့ ထည့်သွင်းရန် မမေ့ပါနှင့်။ ယခုအခါ color state ပြောင်းလဲတိုင်း effect ကို အလုပ်လုပ်စေပါမည်။

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = color;
  }, [color]);
  
  ...
}

ယခုအခါ ကျွန်ုပ်တို့၏ component ထဲသို့ အရောင်ပြောင်းရန် ခလုတ်တစ်ခု ထည့်ကြပါစို့။

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>change</button>
  </div>
);

ကျွန်ုပ်တို့၏ အရောင်ကို လိမ္မော်ရောင်သို့ ပြောင်းပေးမည့် ကလစ်နှိပ်ခြင်း လုပ်ဆောင်ချက်ကိုလည်း ထည့်ကြပါစို့။

App.jsxfunction changeColor() {
  setColor('orange');
}