React တွင် useEffect အသုံးပြုခြင်း

အကျိုးသက်ရောက်မှုများနှင့် အလုပ်လုပ်ရန် useEffect ဟုခ်ကို အသုံးပြုပါသည်။ ၎င်း၏အလုပ်လုပ်ပုံကို ကြည့်ရအောင်။

ပထမဆုံး ကျွန်ုပ်တို့၏ ဟုခ်ကို import လုပ်ပါမည်။

App.jsximport { useEffect } from 'react';

ခေါင်းစဉ်ပါဝင်သည့် App component တစ်ခုကို ဖန်တီးပါမည်။

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

ဥပမာအားဖြင့်၊ render ပြီးသည့်အခါ တစ်ခုခုလုပ်ရန် လိုအပ်သည်ဆိုပါစို့၊ ၎င်းသည် စာမျက်နှာ တစ်ခုလုံး၏ နောက်ခံအရောင်ကို သတ်မှတ်ခြင်း ဖြစ်နိုင်သည်။ ဤကိစ္စတွင် အပြင်ပိုင်း system သည် browser ၏ DOM ဖြစ်လိမ့်မည်။

ကျွန်ုပ်တို့၏ ဟုခ်ကို အသုံးပြုကြည့်ပါမည်။

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

ဒုတိယ parameter အနေဖြင့် dependency array ကို ပေးပို့ပါသည်။ ၎င်းတွင် component ၏ function များတွင် အသုံးပြုသည့် တန်ဖိုးများ ပါဝင်ပါသည်။ လောလောဆယ် ကျွန်ုပ်တို့သည် ၎င်းကို ဗလာထားခဲ့ပါသည်။ ဤသို့ဖြင့် အရောင်သည် render ပြီးသည့်အခါ အစိမ်းရောင်သို့ တစ်ကြိမ်တည်းသာ သတ်မှတ်မည်ဖြစ်သည်။ ဒုတိယ parameter ကို လုံးဝဖယ်ရှားလို့မရပါ၊ အဘယ်ကြောင့်ဆိုသော် သင့် component သည် အဆုံးမရှိသော ကွင်းဆက်ထဲသို့ ဝင်ရောက်သွားနိုင်သောကြောင့်ဖြစ်သည်။