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

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

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

import { useEffect } from 'react';

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

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

export default App;

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

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

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

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

useEffect ဟုခ်ကို အသုံးပြု၍ စာမျက်နှာ၏ title ကို ပြောင်းလဲပါ။