Types of Components

ကျွန်တော်တို့ react ကိုလေ့လာတဲ့အခါမှာသူက component based လို့ပြောတာနဲ့အညီသူ့မှာလည်း

component types လေးတွေ ကွာတာလေးတွေရှိပါတယ်

ဘယ်လိုမျိုးကွာတာလည်းဆိုတော့ အခြေခံအားဖြင့်၂မျိုးခွဲပါတယ်

ဘယ်လိုမျိုးလည်းဆိုတော့ functional component နဲ့ class component ဆိုပြီးတော့ပါပဲ

ခုနကကျတော်ရေးပြသွားတဲ့ဟာက functional အမျိုးအစားဖြစ်ပြီးတော့ class component က ကျတော့

ကျတော်တို့ OOP base ဖြစ်တဲ့ class type နဲ့ရေးကြရပါတယ်

အရင်ကတော့ react မှာ အခုနောက်ပိုင်း သုံးတာတွေဖြစ်တဲ့ React Hook ဆိုတာမျိုးတွေ မရှိတုန်းက တော့

ကျတော်တို့က ပြောင်းလဲမှုတခုခု လုပ်ဖို့အတွက်ဆိုရင် ကျတော်တို့က OOP base ဖြစ်တဲ့ class component

ကို အသုံးပြုကြရပါတယ် ဘာလို့ဆိုတော့ သူ့မှာ က ကျတော်တို့ ( state ) ပြောင်းလဲမှုတွေကို

လုပ်လို့ရတဲ့အတွက်ကြောင့်ပါ

သူ့ကိုအရင်တုန်းက ဘယ်လိုခေါ်ကြတာလည်းဆိုတော့ state component လို့လည်း နောက်တမျိုးခေါ်ကြပါတယ်

ပြီးတော့ functional component တွေက React 17.8 version update မထွက်ခင်အထိ တုန်းကဆိုရင်

သူ့ကို က သိပ်မသုံးကြပါဘူး ဘာလို့ဆိုတော့သူ့မှာက class component တွေလိုမျိုး state တွေကို

management လုပ်လို့မရလို့ပါအဲအတွက်ဘယ်လိုမျိုး လုပ်ကြရတာလည်းဆိုတော့ သူ့ကိုက

ကျတော့ ကျွန်တော်တို့ show case ပြဖို့်အတွက်ပဲ သုံးကြရတော့ သူ့ကို presentational component

လို့လည်းခေါ်ကြပါတယ်

နောက်ပိုင်း React ကနေပြီးတော့ React Hook တွေကို စတင်မိတ်ဆက်တဲ့အချိန်မှာ ကျတော်တို့ က

functional component မှာပဲအကုန်လုံး အလုပ်လုပ်ခိုင်းစေပြီးတော့ application တွေကို

လွယ်လွယ်ကူကူနဲ့ ရေးလာနိုင်တာပါ

ဒီထဲမှာကတော့ ကျတော်ကတော့ class component အကြောင်းတွေကိုပါ အတတ်နိုင်ဆုံးတော့

ကျတော်ရှင်းပြပေးသွားပါမယ်

Functional Component

Class Component

အရင်ဆုံး ကျတော်တို့ class component တခုကို အရင်တည်ဆောက်လိုက်ကြရအောင်

import React from 'react'

class ClassComponent extends React.Component{
    render(){
        return (
            <h1>Hello from Class Component </h1>
        )
    }
}
export default ClassComponent

ကျွန်တော်တို့ ကုဒ်ကိုအရင်ဆုံး ဒီလိုလေးရေးလိုက်ကြပါမယ်ဗျ ဒီအချိန်မှာ ကျတော်တို့ ကဘာလို့

extends လုပ်ရတာလည်းဆိုတော့ ကျတော်တို့က အရှေ့မှာ declare လုပ်လိုက်တဲ့

class component က inheritance ယူထားတာကိုပြောချင်တာပါ

ဘာကိုသွားယူထားတာလည်းဆိုတော့ React.Component ကိုသွားယူလိုက်တာပါ

အဲလိုသွားယူလိုက်တော့ ကျတော်တို့က ဒီ class component ထဲမှာ render

ဆိုတဲ့ကောင်ကို ခေါ်သုံးလို့ရသွားပါတယ် အဲဒီ render ဆိုတဲ့ method က React.Component ထဲက ဟာပါ

နောက်ဆိုရင်သူ့ထဲမှာ သုံးလို့ရမယ့် constructor တွေ super တွေကိုပါ ကျတော်တို့ခေါ်သုံးလို့ရသွားမှာပါ

render ရဲ့အထဲမှာ ကျတော်တို့က return ပြန်ချင်တဲ့ html tag လေးတွေကို ရေးပေးလိုက်ရင်ကျတော်တို့

class component ကြီးကို browser မှာ မြင်ရမှာပါ ဗျ အဲလိုမျိုး browser မှာ မြင်ချင်တယ်ဆိုရင်တော့

ကျတော်တို့ရဲ့ component ကို app.jsx ထဲမှာ import လုပ်ပြီးတော့ သွားသုံးလိုက်ရင်ရပါတယ်ဗ

Functional component က ကျတော့ ကျတော် ပထမဆုံးရေးပြထားပြီးပီဆိုတော့

အဲအတိုင်းပြန်ရေးလိုက်ရင်ရပါတယ်