React useEffectHooks
Hook သည် useEffectသင်၏ အစိတ်အပိုင်းများတွင် ဘေးထွက်ဆိုးကျိုးများကို လုပ်ဆောင်နိုင်စေပါသည်။
အချို့သော ဘေးထွက်ဆိုးကျိုးများ၏ ဥပမာများမှာ- ဒေတာရယူခြင်း၊ DOM ကို တိုက်ရိုက်မွမ်းမံခြင်းနှင့် အချိန်တိုင်းကိရိယာများ။
useEffectအငြင်းအခုံနှစ်ခုကို လက်ခံသည်။ ဒုတိယအငြင်းအခုံသည် စိတ်ကြိုက်ဖြစ်သည်။
useEffect(<function>, <dependency>)
ဥပမာအနေနဲ့ timer ကိုသုံးကြည့်ရအောင်။
ဥပမာ-
setTimeout()ကနဦးတင်ဆက်ပြီးနောက် 1 စက္ကန့်ကို ရေတွက်ရန် အသုံးပြု ပါ-
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
});
return <h1>I've rendered {count} times!</h1>;
}
ReactDOM.render(<Timer />, document.getElementById('root'));
ဒါပေမယ့် စောင့်!! တစ်ကြိမ်သာ ရေတွက်ရသော်လည်း ငါ ဆက်ရေတွက်နေပါသည်။
useEffectrender တိုင်းတွင်အလုပ်လုပ်သည်။ ဆိုလိုသည်မှာ အရေအတွက်ပြောင်းလဲသောအခါတွင် render တစ်ခုဖြစ်ပေါ်လာပြီး နောက်တစ်ခုအကျိုးသက်ရောက်မှုကို အစပြုပါသည်။
ဒါက ငါတို့လိုချင်တာမဟုတ်ဘူး။ ဘေးထွက်ဆိုးကျိုးတွေ ကြုံလာတဲ့အခါ ထိန်းချုပ်ဖို့ နည်းလမ်းများစွာရှိပါတယ်။
array တစ်ခုကို လက်ခံသည့် ဒုတိယ ဘောင်ကို ကျွန်ုပ်တို့ အမြဲတမ်း ထည့်သွင်းသင့်သည်။ useEffectကျွန်ုပ်တို့သည် ဤ array တွင် မှီခိုမှုအား စိတ်ကြိုက်ရွေးချယ်နိုင်ပါသည် ။
1. မှီခိုမှု မအောင်မြင်ပါ
useEffect(() => {
//Runs on every render
});2. ဗလာ array တစ်ခု-
useEffect(() => {
//Runs only on the first render
}, []);3. Props သို့မဟုတ် ပြည်နယ်တန်ဖိုးများ-
useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [prop, state]);ထို့ကြောင့် ဤပြဿနာကို ဖြေရှင်းရန်၊ ဤအကျိုးသက်ရောက်မှုကို ကနဦး render တွင်သာ လုပ်ဆောင်ကြပါစို့။
ဥပမာ-
ကနဦး တင်ဆက်မှုအပေါ် အကျိုးသက်ရောက်မှုကိုသာ လုပ်ဆောင်ပါ-
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
}, []); // <- add empty brackets here
return <h1>I've rendered {count} times!</h1>;
}
ReactDOM.render(<Timer />, document.getElementById('root'));
ဥပမာ-
ဤသည်မှာ useEffectvariable ပေါ်တွင်မူတည်သော Hook ၏ ဥပမာတစ်ခုဖြစ်သည်။ ပြောင်းလဲနိုင်သော အပ်ဒိတ်လုပ်ပါ က count၊ အကျိုးသက်ရောက်မှု ထပ်မံလုပ်ဆောင်ပါမည်-
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Counter() {
const [count, setCount] = useState(0);
const [calculation, setCalculation] = useState(0);
useEffect(() => {
setCalculation(() => count * 2);
}, [count]); // <- add the count variable here
return (
<>
<p>Count: {count}</p>
<button onClick={() => setCount((c) => c + 1)}>+</button>
<p>Calculation: {calculation}</p>
</>
);
}
ReactDOM.render(<Counter />, document.getElementById('root'));
မှီခိုမှုအများအပြားရှိလျှင် ၎င်းတို့ကို useEffectမှီခိုမှုခင်းကျင်းတွင် ထည့်သွင်းသင့်သည်။
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
အကျိုးသက်ရောက်မှု ရှင်းလင်းရေး
မမ်မိုရီယိုစိမ့်မှုကို လျှော့ချရန်အတွက် အချို့သောအကျိုးသက်ရောက်မှုများသည် ရှင်းလင်းရန် လိုအပ်သည်။
အချိန်ကုန်ခြင်း၊ စာရင်းသွင်းမှုများ၊ ပွဲနားထောင်သူများနှင့် မလိုအပ်တော့သော အခြားအကျိုးသက်ရောက်မှုများကို ဖယ်ရှားပစ်သင့်သည်။
useEffectHook ၏အဆုံးတွင် return function တစ်ခု ပါဝင်ခြင်းဖြင့် ၎င်းကို ကျွန်ုပ်တို့လုပ်ဆောင်သည်။
ဥပမာ-
useEffectHook ၏အဆုံးတွင် timer ကို ရှင်းလင်းပါ။
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
let timer = setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
return () => clearTimeout(timer)
}, []);
return <h1>I've rendered {count} times!</h1>;
}
ReactDOM.render(<Timer />, document.getElementById("root"));
မှတ်ချက်- အချိန်တိုင်းကိရိယာကို ရှင်းလင်းရန်၊ ကျွန်ုပ်တို့က ၎င်းကို အမည်ပေးရမည်ဖြစ်သည်။