အကယ်၍ သင်သည် React ချိတ်များအကြောင်း မလေ့လာရသေးသော React developer တစ်ယောက်ဖြစ်ပါက၊ ယခုအချိန်သည် အခိုက်အတန့်ဖြစ်သည်။ ဤ post သည် useEffect React Hook ကို အသေးစိတ်ဖော်ပြပါမည်။ ၎င်းသည် Swiss Army ဓားတစ်ချောင်းနှင့် ညီမျှသည်။ ၎င်းသည် အစိတ်အပိုင်းတစ်ခု တပ်ဆင်သည့်အခါ ဒေတာရယူနည်း၊ အခြေအနေတစ်ခု သို့မဟုတ် prop အပြောင်းအလဲရှိသည့်အခါ ကုဒ်ကိုဖွင့်နည်း၊ အချိန်တိုင်းကိရိယာ သို့မဟုတ် ကြားကာလများကို သတ်မှတ်ပုံစသည်ဖြင့် ပြဿနာအမျိုးမျိုးကို ဖြေရှင်းပေးသည်။
useEffect သည် JSX (မည်သည့်ဘေးထွက်ဆိုးကျိုး အမျိုးအစားမဆို) ပြန်မလာနိုင်သော React အစိတ်အပိုင်းတစ်ခုတွင် သင် "လုပ်" ချင်သည့်အရာအတွက် အသုံးပြုသည်။ အစိတ်အပိုင်းတစ်ခုစီတွင် အသုံးပြုမှုအကျိုးသက်ရောက်မှုများလည်း များစွာရှိနိုင်သည်။
ဤပါဝါအားလုံးသည် စရိတ်စကဖြင့် ရောက်လာသည်- ၎င်းကို မည်သို့လုပ်ဆောင်သည်ကို သင်နားမလည်ပါက၊ ၎င်းသည် ရှုပ်ထွေးသွားနိုင်သည်။ ဤပို့စ်တွင်၊ conceptual model ကို နားလည်ပြီး သင့်ကိုယ်ပိုင်ကုဒ်တွင် အသုံးချနိုင်စေရန်အတွက် ဥပမာအမျိုးမျိုးကို ကြည့်ရှုပါမည်။
React Hooks - ဘာကို ဖြေရှင်းဖို့ ကြိုးစားနေတာလဲ။
Hooks ကို React ဗားရှင်း 16.8 တွင် ပထမဆုံးမိတ်ဆက်ခဲ့ပြီး ယခုအခါ React ပရောဂျက်များစွာမှ အသုံးပြုလျက်ရှိသည်။ Hooks သည် အစိတ်အပိုင်းများကြား ကုဒ်ထပ်ကျော့ခြင်းပြဿနာကို ကျော်လွှားသည်။ အတန်းအသုံးမပြုဘဲ ရေးထားတာပါ။ ယင်းက React သည် အတန်းများကို စွန့်ပစ်သည်ဟု မဆိုလိုပါ။ ချိတ်များသည် ရိုးရှင်းသော အခြားနည်းလမ်းတစ်ခုဖြစ်သည်။
React သည် သင့်အား တည်ငြိမ်သော ယုတ္တိဗေဒဖြင့် ခေတ်မီဆန်းပြားသော အစိတ်အပိုင်းများကို လျင်မြန်စွာ ဖန်တီးနိုင်စေပါသည်။ အတန်းသည် React Lifecycle Methods များကို အားကိုးသောကြောင့် ဤအစိတ်အပိုင်းများကို ခွဲခြားရန်ခက်ခဲပါသည်။ ဤနေရာတွင် React Hooks ဝင်လာသည်။
၎င်းတို့သည် သင့်အား အစိတ်အပိုင်းတစ်ခုကို သေးငယ်သောလုပ်ဆောင်ချက်များအဖြစ် ပိုင်းခြားနိုင်စေပါသည်။ Lifecycle နည်းလမ်းများကိုအခြေခံ၍ ကုဒ်အသေးစားများကို အပိုင်းပိုင်းခွဲမည့်အစား၊ လုပ်ဆောင်နိုင်စွမ်းပေါ်မူတည်၍ ကုဒ်ငယ်များကို ယခုစီစဉ်ပြီး ခွဲထုတ်နိုင်ပါသည်။
UseEffect Hook ဆိုတာ ဘာလဲ။
Hooks များသည် ES6 အတန်းများကို ရေးသားရန်မလိုဘဲ အခြေအနေနှင့် အခြားတုံ့ပြန်မှုစွမ်းရည်များကို ဝင်ရောက်ကြည့်ရှုနိုင်စေသည့် လုပ်ဆောင်ချက်များဖြစ်သည်။ react hooks API တွင် useEffect ဟုခေါ်သော ချိတ်တစ်ခုရှိသည်။ အကယ်၍ သင်သည် react life cycles ကို သိပါက၊ useEffect ချိတ်သည် နှင့် အတူတူပင်။ မင်္ဂလာပါ, မင်္ဂလာပါနှင့် မြတ်နိုး ဘဝသံသရာနည်းလမ်းများပေါင်းစပ်။
React Hooks documentation အရ၊ ၎င်းကို ES6 class component life cycle method ဖြင့် ပြဿနာအချို့ကို ဖြေရှင်းရန် ဖန်တီးထားသည်။
syntax
ပထမအငြင်းအခုံသည် render တစ်ခုစီပြီးနောက် ပုံသေဖြင့်လုပ်ဆောင်သည့် callback function ဖြစ်သည်။ ဒုတိယ ကန့်သတ်ဘောင်သည် ပစ်မှတ်အခြေအနေ ပြောင်းလဲမှသာ Hook အား ပြန်ခေါ်ရန် ညွှန်ကြားသည့် စိတ်ကြိုက်ရွေးချယ်နိုင်သော မှီခိုမှု အခင်းတစ်ခုဖြစ်သည်။
The Hook သည် မှီခိုမှုတစ်ခုစီ၏ သမိုင်းကြောင်းနှင့် လက်ရှိအခြေအနေများကို နှိုင်းယှဉ်ထားသည်။ တန်ဖိုးနှစ်ခု မကိုက်ညီပါက၊ Hook သည် ပထမဘောင်တွင် သတ်မှတ်ထားသော ပြန်ခေါ်မှုကို ခေါ်ဆိုသည်။ မှီခိုမှု အခင်းအကျင်းများသည် ပုံမှန်ပြန်ခေါ်သည့် အပြုအမူကို ပြောင်းလဲစေပြီး Hook သည် အစိတ်အပိုင်းနယ်ပယ်ရှိ အခြားအစိတ်အပိုင်းအားလုံးကို လျစ်လျူရှုထားကြောင်း အာမခံပါသည်။
အခြေခံအသုံးပြုမှု
မက်ဆေ့ချ်တစ်ခုကို သိမ်းဆည်းရန်၊ ကျွန်ုပ်သည် အထက်ဖော်ပြပါ ကုဒ်နမူနာတွင် React useState ကို အသုံးပြုနေပါသည်။ ထို့နောက်တွင် ကျွန်ုပ်သည် ကျွန်ုပ်၏ မက်ဆေ့ချ် အခြေအနေ ပြောင်းလဲနိုင်သော ပုံစံကို ယူကာ မျက်နှာပြင်ပေါ်တွင် ပရင့်ထုတ်ပါ။ သို့သော်၊ အစိတ်အပိုင်းကိုတပ်ဆင်ပြီးသည်နှင့်တစ်စက္ကန့်အတွင်းမက်ဆေ့ခ်ျကိုမွမ်းမံရန်ယခုကျွန်ုပ်သည်Effect ကိုအသုံးပြုလိုပါသည်။
React မူဘောင်မှ useEffect ကို တင်သွင်းပြီးနောက် useState လိုင်းနောက်တွင် ကျွန်ုပ်၏အကျိုးသက်ရောက်မှုကို ထည့်သွင်းထားပါသည်။ အကျိုးသက်ရောက်မှုကို အသုံးပြုရန် ပထမဆုံး ဘောင်သည် လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။ ဤလုပ်ဆောင်ချက်ကို ကိုင်တွယ်ဖြေရှင်းသောအခါတွင်၊ ၎င်းသည် သင်ပေးဆောင်သည့် ဘေးထွက်ဆိုးကျိုးများကို ဂရုစိုက်လိမ့်မည်။ လုပ်ဆောင်ချက်သည် React အစိတ်အပိုင်း ဘဝသံသရာ ဖြစ်ရပ်များ ပေါ်ပေါက်လာသည့်အခါ ပြန်ခေါ်သည့် လုပ်ဆောင်ချက်တစ်ခု ဖြစ်သည်။
ဘယ်အချိန်မှာသုံးမလဲ။
useEffect ချိတ်သည် အခြေအနေအမျိုးမျိုးတွင် အသုံးဝင်နိုင်သည်။ အောက်ပါတို့သည် အရေးကြီးဆုံးဖြစ်သည်။
- ကျွန်ုပ်တို့သည် ပံ့ပိုးပေးထားသည့် အကြောင်းပြချက်တစ်ခုပေါ်မူတည်၍ ဒေတာကို ရယူလိုသောအခါတွင် ကျွန်ုပ်တို့သည် ဤကန့်သတ်ချက်ကို ပြောင်းလဲနိုင်သည်။ ဒေတာအသစ်ဖြင့် ကန့်သတ်ဘောင်ကို အပ်ဒိတ်လုပ်ပြီးသောအခါ ၎င်းကို ပြန်လည်သိမ်းဆည်းပါမည်။
- အကယ်၍ ကျွန်ုပ်တို့သည် API အဆုံးမှတ်တစ်ခုမှဒေတာကိုရယူလိုပြီး ၎င်းကို client-side တွင်ပြသလိုပါက။ ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းကို ပြန်ဆိုသောအခါ၊ useEffect ချိတ်သို့ ပေးထားသည့် လုပ်ဆောင်ချက် သို့မဟုတ် ကိုင်တွယ်လုပ်ဆောင်သူကို လုပ်ဆောင်ပြီး အစိတ်အပိုင်းပြည်နယ်များရှိ ဒေတာများကို ပြန်လည်ရယူသည်။ ထို့နောက် အဆိုပါ အခြေအနေများကို အသုံးပြုသူ အင်တာဖေ့စ် အစိတ်အပိုင်းများတွင် အသုံးပြုသည်။
- သင်၏ အစိတ်အပိုင်းသည် ပြင်ပကမ္ဘာမှ ဒေတာကို အားကိုးပြီး ဒေတာများ ရောက်ရှိလာမည်ကို ကျွန်ုပ်တို့ မသေချာပါက၊ ကျွန်ုပ်တို့သည်Effect ကို အသုံးပြုသင့်သည် (ဆာဗာမှာ ရှိကောင်းရှိနိုင်သည်)။ ပြဿနာများကို ပစ်ပေါက်ပြီး အခြားအစိတ်အပိုင်းများကို မပြသရန် တားဆီးမည့်အစား၊ ၎င်းတို့ကို useEffect ချိတ်တွင် ထားလိုက်ပါ။
ရောဂါဖြစ်ပွားမှုကိုသုံးပါ
ပထမ run ပြီးနောက် အစိတ်အပိုင်းကို ပြန်လည်ဖော်ပြပါက၊ ၎င်းသည် လုပ်ဆောင်မည်မဟုတ်ပါ။
အစိတ်အပိုင်းတစ်ခုက ပြန်ဆိုသည် သို့မဟုတ် ပြန်ဆိုသည့်အခါတိုင်း၊ ၎င်းကို အမြဲတမ်း လုပ်ဆောင်သင့်သည်။
ပုံမှန်အားဖြင့်၊ ပရိုဂရမ်သည် တစ်ကြိမ်သာ လုပ်ဆောင်သည်။ ထို့နောက် prop တန်ဖိုးများ ပြောင်းလဲပါက၊ run
အပြိုင်အဆိုင်လုပ်ဆောင်မှုများအတွက်၊ useEffect ကို အမြဲသုံးပါ။
useEffect code blocks များသည် သင့် developer ချင်းများအတွက် အပျက်သဘောဆောင်သည့် အလုပ်များ၏ သိသာထင်ရှားသော အမှတ်အသားများဖြစ်သည်။ useEffect ကိုအသုံးမပြုဘဲ asynchronous ကုဒ်ကိုဖန်တီးနိုင်သော်လည်း ၎င်းသည် "React method" မဟုတ်ပါ၊ ၎င်းသည် ရှုပ်ထွေးမှုနှင့် အမှားများ၏အန္တရာယ်ကို တိုးစေသည်။
UI ကို ရပ်တန့်စေမည့် အပြိုင်အဆိုင် ကုဒ်ရေးမည့်အစား useEffect ကို အသုံးပြုခြင်းသည် React အသိုင်းအဝိုင်းတွင် လူသိများသော နည်းပညာတစ်ခုဖြစ်ပြီး၊ အထူးသဖြင့် ဘေးထွက်ဆိုးကျိုးတစ်ခုလုပ်ဆောင်ရန် React အဖွဲ့မှ ၎င်းကို တည်ဆောက်ထားသည့် နည်းလမ်းဖြစ်သည်။
၎င်းကိုအသုံးပြုခြင်း၏နောက်ထပ်အားသာချက်တစ်ခုမှာ developer များသည် ကုဒ်ကိုရိုးရှင်းစွာပြန်လည်သုံးသပ်နိုင်ပြီး ပထမ render စက်ဝန်းပြီးမှသာ အရေးကြီးသည့် “control flow အပြင်ဘက်” run သော code ကိုချက်ချင်းသိရှိနိုင်ခြင်းဖြစ်သည်။ ထို့အပြင်၊ လုပ်ကွက်များသည် ပြန်လည်အသုံးပြု၍ ပို၍ပင် အဓိပ္ပါယ်ရှိသော စိတ်ကြိုက် Hooks များအဖြစ် ထုတ်ယူရန်အတွက် သင့်လျော်ပါသည်။
ဥပမာတခု
useEffect ကုဒ်ကိုအသုံးပြု၍ တစ်စက္ကန့်လျှင် နံပါတ်တစ်ခုတိုးပါ။
ကောက်ချက်
ကျွန်တော့်အမြင်အရတော့ useEffect Hook ၏ အရင်းခံ ဒီဇိုင်းမူများနှင့် အကောင်းဆုံးအလေ့အကျင့်များကို နားလည်ခြင်းသည် နောက်အဆင့် React developer ဖြစ်လာလိုပါက လေ့လာရန် အရေးကြီးသော ကျွမ်းကျင်မှုတစ်ခုဖြစ်သည်။
အနှစ်ချုပ်ရလျှင်၊ useEffect Hook သည် မရှိမဖြစ်လိုအပ်သော၊ အကျိုးသက်ရောက်မှု အပြည့်အ၀ရနိုင်သော ယုတ္တိဗေဒ ပါဝင်သော လုပ်ဆောင်ချက်ကို လက်ခံရရှိသည် ။ လုပ်ဆောင်မှုအပေါ် လွှမ်းမိုးရန် ဒုတိယဘောင်ဖြစ်သည့် မှီခိုမှုခင်းကျင်းမှုကို အသုံးပြုနိုင်သည်။ ၎င်းကိုကိုင်တွယ်ရာတွင်၊ ပြန်ပေးသည့်လုပ်ဆောင်ချက်ကို အသုံးပြု၍ သန့်ရှင်းရေးကုဒ်ရေးရန်လည်း လိုအပ်ပါသည်။
ဆောင်းပါးက အထောက်အကူဖြစ်တယ်ဆိုရင် မှတ်ချက်မှာ ကျွန်တော်တို့ကို အသိပေးပါ။
တစ်ဦးစာပြန်ရန် Leave