ဖြေရှင်းထားသည်- လျှို့ဝှက်တုံ့ပြန်မှု

ပထမဆုံးအနေနဲ့၊ React မှာ အလွန်အရေးပါတဲ့ lifecycle method တစ်ခုဖြစ်တဲ့ componentDidCatch အကြောင်း ပြောကြည့်ရအောင်။ ဤနည်းလမ်းသည် JavaScript အမှားနယ်နိမိတ်တစ်ခုအဖြစ် လုပ်ဆောင်သည်။ အစိတ်အပိုင်းတစ်ခုတွင် အမှားအယွင်းတစ်ခု ချလိုက်ပါက၊ componentDidCatch နည်းလမ်းသည် အမှားကို ဖမ်းယူပြီး အက်ပ်တစ်ခုလုံးကို ပျက်စီးစေမည့်အစား လှည့်ကွက် UI ကို ပြသသည်။ ၎င်းသည် React 16 နှင့်အထက်ရှိ "Error Boundaries" အယူအဆ၏ အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။

ဤဘဝသံသရာနည်းလမ်းကို အသုံးပြုရန် နည်းလမ်းအမျိုးမျိုးရှိသည်။ သို့သော်၊ React အစိတ်အပိုင်းများတွင် သော့ချခြင်းဖြစ်ရပ်များကို ကိုင်တွယ်ခြင်းသည် ယေဘူယျလိုအပ်ချက်တစ်ခုဖြစ်ပြီး အသုံးချသည့်ဗျူဟာများထဲမှတစ်ခုမှာ onKeyDown ဖြစ်ရပ်ကို အကောင်အထည်ဖော်ရန်ဖြစ်သည်။ အဖြေရှာကြည့်ရအောင်။

class (YourComponent) extends React.Component {
  onKeyDown(event) {
    switch (event.keyCode) {
      case 27:
        // logic here
        break;
      default:
        break;
    }
  }

  componentWillMount() {
    document.addEventListener('keydown', this.onKeyDown.bind(this));
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.onKeyDown.bind(this));
  }
}

ကဲ၊ ကုဒ်ရဲ့ အဆင့်ဆင့် ရှင်းလင်းချက်တစ်ခုကို သွားကြည့်ရအောင်။

React တွင် ဖြစ်ရပ်ကို ကိုင်တွယ်ခြင်း။

React သည် မတူညီသောဘရောက်ဆာများတွင် တူညီသောဂုဏ်သတ္တိများရှိကြောင်း သေချာစေရန် ဘရောက်ဆာ၏ မူလဖြစ်ရပ်များအနီးတွင် ပေါင်းစပ်ထားသော ပေါင်းစပ်ဖြစ်ရပ်များကို ပံ့ပိုးပေးပါသည်။ 'onKeyDown' လုပ်ဆောင်ချက်သည် အသုံးပြုသူတစ်ဦးက သော့တစ်ခုကို နှိပ်သည့်အခါ ခေါ်သည့် ဖြစ်ရပ်ကိုင်တွယ်သူဖြစ်သည်။

အစိတ်အပိုင်း Lifecycle နည်းလမ်းများ

အစိတ်အပိုင်းတစ်ခုကို DOM သို့ပြန်ဆိုသောအခါ၊ ၎င်းသည် တပ်ဆင်ခြင်း၊ အပ်ဒိတ်လုပ်ခြင်းနှင့် ဖြုတ်ခြင်းစသည့် ဘဝသံသရာအဆင့်များစွာကို ဖြတ်သန်းသည်။ ၎င်းသည် ၎င်းတို့၏ အပြုအမူ အချို့သော သွင်ပြင်များ ၏ တုံ့ပြန်မှု အစိတ်အပိုင်းများကို ထုပ်ပိုးနိုင်စွမ်း ပေးသည်။ ကျွန်ုပ်တို့သည် componentWillMount တွင် event listener တစ်ခုကို ပေါင်းထည့်နေပြီး ၎င်းကို componentWillUnmount တွင် ဖယ်ရှားခြင်းသည် မှတ်ဉာဏ်ယိုစိမ့်မှုကို ကာကွယ်ရန်ဖြစ်သည်။

React ရှိ ဖြစ်ရပ်များကို ကိုင်တွယ်ရာတွင် ပါ၀င်သော အခြားသော အစိတ်အပိုင်းများနှင့် စာကြည့်တိုက်များကို ထည့်သွင်းစဉ်းစားရန်လည်း အရေးကြီးပါသည်။ ဒစ်ဂျစ်တိုက်များစွာသည် ထပ်လောင်းအင်္ဂါရပ်များကို ပေးဆောင်ပြီး ချိန်ကိုက်ခြင်းကိစ္စများကို ကိုင်တွယ်ခြင်း သို့မဟုတ် အရှိန်အဟုန်မြှင့်ခြင်းနှင့် အဆုံးအဖြတ်ပေးခြင်းတို့ကို လုပ်ဆောင်ခြင်းများကဲ့သို့သော လုပ်ဆောင်စရာများကို လုပ်ဆောင်ပေးသည်။

React တွင် စာကြည့်တိုက်များ ကြွယ်ဝသော ဂေဟစနစ် ရှိသည်။ ၎င်းသည် သင်၏ ဖွံ့ဖြိုးတိုးတက်မှု လုပ်ငန်းစဉ်ကို သက်သာစေနိုင်သည်။ ဥပမာအားဖြင့်၊ 'react-use' သည် 'useKey' အပါအဝင် စိတ်ကြိုက်ချိတ်အများအပြားကို ပံ့ပိုးပေးသည့် နာမည်ကြီး စာကြည့်တိုက်တစ်ခုဖြစ်သည်။ 'useKey' သည် ခလုတ်နှိပ်သည့် ဖြစ်ရပ်များကို တုံ့ပြန်ရန် အသုံးပြုနိုင်သည့် ချိတ်တစ်ခုဖြစ်သည်။ ၎င်းသည် အပြန်အလှန်တုံ့ပြန်သော React အပလီကေးရှင်းများကို ဖန်တီးရာတွင် အသုံးဝင်သောကိရိယာတစ်ခု ဖြစ်စေသည်။.

ဒါ့အပြင် စွမ်းဆောင်ရည်နဲ့ ပတ်သက်တဲ့ ရှုထောင့်တွေကိုလည်း ထည့်သွင်းစဉ်းစားဖို့ ရှိပါတယ်။ ဥပမာအားဖြင့်၊ စာမျက်နှာတစ်ခုတည်းတွင် အပလီကေးရှင်းတစ်ခုတွင် သင်သည် အစီအစဉ်နားထောင်သူများကို မကြာခဏထည့်သွင်းခြင်းနှင့် ဖယ်ရှားပါက စွမ်းဆောင်ရည်အပေါ် သက်ရောက်မှုရှိနိုင်သည်။ ထို့ကြောင့် ပွဲနားထောင်သူများကို ပေါင်းထည့်ခြင်းနှင့် ဖယ်ရှားခြင်းနည်းဗျူဟာကို ထည့်သွင်းစဉ်းစားရန် အရေးကြီးပါသည်။

ကီးဘုတ်ပွဲများကို ကိုင်တွယ်ခြင်း။

ချောမွေ့သောအသုံးပြုသူအတွေ့အကြုံကို ပေးဆောင်ရာတွင် ကီးဘုတ်ဖြစ်ရပ်များသည် မရှိမဖြစ်လိုအပ်ပါသည်။ React သည် ဤဖြစ်ရပ်များကိုကိုင်တွယ်ရန် 'onKeyDown'၊ 'onKeyPress' နှင့် 'onKeyUp' နည်းလမ်းများကို ပံ့ပိုးပေးပါသည်။ သင့်လိုအပ်ချက်ပေါ်မူတည်၍ သော့နှိပ်သည့်ဖြစ်ရပ် ('onKeyDown' သို့မဟုတ် 'onKeyPress') သို့မဟုတ် သော့ထုတ်လွှတ်မှုဖြစ်ရပ် ('onKeyUp') တို့ကို ရိုက်ကူးရန် လိုအပ်နိုင်သည်။