mg-kh / react-component-patterns

React Component Patterns

npx create-react-app

ဆိုတာကို teminal မှာရိုက်ထည့်လိုက်တာနဲ့ react နဲ့စတင်ထိတွေ့ရပါပီ အထဲမှာ state တွေ event တွေစပီးတော့ ဖြတ်သန်းနေကြပီ ဆိုတော့ model တစ်ခုပွင့်လာဖို့ ပိတ်သွားဖို့ကိလဲ true/false စတဲ့ boolean တွေနဲ့ ကိုင်တွယ်ရတော့မယ်။ model တွေများလာတာနဲ့အမျှ true/false တွေကလဲများလာမှာပဲဘယ်နားက model ကိုပိတ်ချင်တာ ဘယ် boolean ကိုပြောင်းရမယ် စသဖြင့်တွေလုပ်စရာများလာပီ။react မှ မဟုတ်ဖူးတစ်ခြား vue ဆိုလဲ component တွေခွဲပီးရေးလို့ရတာပဲ။ပြသနာက component တွေပွလာတာပဲ။

ဆိုကြပါစို့ code တစ်ခုထဲမှာ dev ၂ယောက် ဝိုင်းရေးတယ်

1. တစ်ယောက်က component တွေကို မွနေအောင်ခွဲထားတယ်။ပီးတော့ပြန်ယူသုံးထားတယ်။သူ့အတွက်တော့အဆင်ပြေနေတယ်။ သူခွဲပီး သူယူသုံးထားတာ။အာ့တာကိုနောက်တစ်ယောက်က maintain ဝင်လုပ်တယ် ဘယ်နားကဘယ်လိုတွေခေါ်သုံးထားလဲသေချာမသိတော့ဘူး။ဖြတ်လို့လဲမရဘူး တစ်ခုနဲ့တစ်ခုနဲ့က props တွေတောက်လျှောက်ပေးထားတာ props drilling down တွေတစ်အားများတာ ၊ name တွေ consistent မဖြစ်နေတာနဲ့ လိုရင်းမရောက်သွားဘူး

2. တစ်ယောက်က သိပ်မခွဲဘူး၊ အပေါ်မှာတွေချည်းရှိသမျှ data တွေ event ကိုစုပီးတော့သုံးထားတယ်။code line တွေက ရှည်လျှားပီးတော့ တစ်ခုခုပြင်ဖို့ဆိုရင် ctrl+f ကိုနှိပ်ပီးမရှာရင် scroll ကိုတော်တော်လေးဆွဲရတယ်။

ဆိုတော့ အာ့လိုမျိုးကိစ္စတွေအတွက် maintain လုပ်ဖို့ ပိုလွယ်သွားအောင်၊တစ်ဉီးနဲ့တစ်ဉီးလဲ ပိုပီး harmony ကိုက်သွားအောင်လို့ ဘယ်လိုပုံစံမျိုးတွေရေး၊ global မဟုတ်ရင် component ကိုဘယ်လိုခွဲ ဘယ်လိုနေရာမျိုးတွေမှာထည့်ထား၊ သက်ဆိုင်ရာ component အတွက်ပဲ data နဲ့ data transformation ကို ဘယ်လိုလုပ်, ဘယ်အပိုင်းနဲ့ ဘယ်အပိုင်းကို ခွဲထား စသဖြင့်ပြောဆိုနေတာတွေကို pattern လို့ခေါ်တယ်ဆိုကြပါစို့။Pattern က တစ်ယောက်နဲ့ တစ်ယောက် team တစ်ခုနဲ့ တစ်ခု အာဘော်တွေမတူကြတာကြောင့် တူဖို့တော့မဖြစ်နိုင်ပေမယ့် pattern တော်တော်များများတော့ရှိနေပါတယ်။သူ့အားသာချက်နဲ့ သူ့အားသာချက်တွေရှိနေပီးသားပါပဲ။

React env မှာလဲ pattern တွေအများကြီးရှိတယ်။ အာ့ထဲကမှာ တော်တော်များများ ပြောနေကြတာတွေကို ထုတ်လိုက်ရင်တော့ -

1. Container View pattern

2. Provider Pattern

3. Compound Component pattern

ဒီ pattern ၃ခုကတော့ တော်တော်လေး popular ဖြစ်ပုံရပါတယ်

Container View Pattern

Container နဲ့ View ပါဝင်တာပါ။ Container ဆိုတာ ကျတော်တို့ရဲ့ data တွေ event တွေ data transformation တွေစတဲ့ flow တွေပါဝင်နေတဲ့နေရာကိုခေါ်ပါတယ်။ ပိုပီးမြင်သာအောင် ဉပမာပေးရမယ်ဆိုရင် api data fetching လုပ်တယ်ဆိုကြပါစို့ ဘယ်အချိန်မှာ data fetch လုပ်မလဲ/ ရလာတဲ့ data တွေကို ဘယ်လိုမျိုး ပြောင်းလဲမလဲ စတာတွေကိုလုပ်ပေးတဲ့နေရာဖြစ်ပါတယ်။ View ဆိုတာကတော့ ui ပါ။ သူက Container ကနေပေးလိုက်တဲ့ data နဲ့ eventHandler တွေကိုပေါင်းစပ်ပီးတော့ web page မှာ မြင်ရအောင် style တွေ လုပ်ပေးတာပါ။ View ထဲမှာ data တွေကို ပြန်လည်ပြင်ဆင်ခြင်းတွေမလုပ်ပါဘူး ပြင်ဆင်ချင်တာရှိရင် container ကိုလှမ်းခိုင်းပါတယ်။ view ကတောင်းဆိုတဲ့ eventHandler တွေပေါ်မှာမူတည်ပီးတော့ container ကလုပ်ပေးပီးတော့ ရလာတဲ့ data ကို view ကိုပြန်ပေးပါတယ်။ ဆိုတော့ ui ပြင်ချင်ရင် view ထဲမှာ အေးဆေးသွားပြင်လို့ရပါတယ်။ view မှာ ပြတဲ့ data မှားနေရင် container ထဲမှာ သွားပြင်ပါတယ်။ သီးသန့်စီ တာဝန်ယူမှု ခွဲလိုက်တာကြောင့် maintain လုပ်ရတာဖြစ်ဖြစ်/ အသစ်ထပ်ထည့်တာဖြစ်ဖြစ် သက်ဆိုင်ရာ file ထဲမှာ သွားလုပ်လို့ ရသွားလို့ developer အတွက်လဲ work load သက်သာစေပါတယ်။

The Provider Pattern

React ကိုရေးကြပီဆိုရင် component တွေ ခွဲရေးပီးတော့ ပြန်ပေါင်းကြတာပါပဲ။ component တွေခွဲရေးကြပီဆိုရင်တော့ component တွေမှာ ဖော်ပြဖို့ (သို့) component တွေကနေလုပ်ဆောင်ဖို့ data တွေ event တွေကိုပေးကြရတာပါပဲ။ ဆိုကြစို့ Main Component ကနေ ChildA နဲ့ ChildB ခွဲလိုက်တယ်ပေါ့။ child components တွေအတွက် သက်ဆိုင်ရာ data နဲ့ event တွေကို props တွေကနေပေးလိုက်ကြတယ်။ ChildA component အောက်မှာ SubChildA တစ်ခုရှိနေပြန်တယ်။SubChildA ကို ChildA ကတစ်ဆင့် props တွေပေးလိုက်ရပြန်တယ်။Nested ဖြစ်ရင် ဖြစ်သလောက် props တွေ ဆင့်ဆင့်ပီးတော့ပေးရမှာ။ အာ့လို အဖြစ်မျိုးကို props drilling down လို့ခေါ်ကြတယ်။parent နဲ့ child ကဝေးသွားရင်ဝေးသွားသလောက် bug တစ်ခုခုဖြစ်လာရင် props trace လုပ်ရတာ များသွားတက်တယ်။အခုလိုကြုံတွေ့လာပီဆိုရင် ကျတော်တို့က ChildA context တစ်ခုဆောက်ပီးတော့ ChildA အောက်က sub child အကုန်လုံးကိုdata နဲ့ event ကို provide လုပ်ပေးလို့ရတယ်။ Parent က Nested Child ကို data လိုက်ပေးစရာမလိုတော့ဘူး။အာ့လိုမျိုးလုပ်ဆောင်ချက်ကို လဲ provider pattern လို့ခေါ်ကြတာဖြစ်ပါတယ်။

Compound Component Pattern

Compound Component ဆိုတာကတော့ ရည်ရွယ်ချက်တစ်ခုစီအတွက်တည်ဆောက်ထားတဲ့ component pieces တွေကို ပေါင်းစပ်ပီးတော့ ကိုယ်အသုံးချလိုတဲ့ component တစ်ခုအဖြစ်ပြန်လည်တည်ဆောက်တာဖြစ်ပါတယ်။ ဉပမာ ကျတော်တို့ model box တစ်ခုလုပ်ကြတယ်ဆိုပါစို့။ model box တစ်ခုမှာဆိုရင် overlay လို့ခေါ်တဲ့ opacity လျော့ထားတဲ့ layer တစ်ခုပါလေ့ရှိတယ်။ ပီးတော့ အလည်မှာ ကိုယ်ဖော်ပြချင်တဲ့information တစ်ခုရှိတယ်။ ကျတော်တို့ က model တစ်ခုပြချင်တိုင်း overlay ရယ် information ရယ်ကို ပြန်ပြန်ပီး တည်ဆောက်နေမယ့်အစားoverlay ဆိုတာကို တစ်နေရမှာ ဆောက်ထားပီးတော့ သုံးလိုက်တိုင်း information ပဲထည့်ပေးစရာလိုပီးတော့ model box ပေါ်လာအောင်လုပ်ထားလို့ရတယ်။ ရည်ရွယ်ချက်တစ်ခုစီ လုပ်ထားတာဖြစ်လို့ background opacity လျှော့သုံးထားပီးတော့ လိုချင်တာကို focus လုပ်ပြထားဖို့လိုတိုင်း ခုနက overlay component မှာသွားပီး ပေါင်းစပ်အသုံးပြုလို့ရသွားပါတယ်။s