Explaining React Hooks to those who already familiar with React

react-hooks.md

React Hooks

ဒီစာဟာ လက်ရှိ Rockstar Developer Course မှာ တက်ရောက်နေသူတွေ အတွက်ဖြစ်တယ်။ ဒါကြောင့် အပြင်လူတွေ နားလည်စေမယ့် ရှင်းလင်းချက် အပြည့်အစုံနဲ့ အသေးစိတ်တော့ ပါမှာမဟုတ်ပါဘူး။ နောင်အချိန်ရမှ ထပ်ဖြည့်ပေးပါမယ်။

React က စမ်းသပ်နေတာ ကာလတစ်ခုကြာပြီဖြစ်တဲ့ Hooks လိုခေါ်တဲ့ Feature ကို React v16.8 မှာ စတင်ထည့်သွင်းပေးခဲ့ပါပြီ။ ဒါကြောင့် တို့တွေလည်း စတင်စမ်းသပ် အသုံးပြုသင့်ပြီဆိုပါတော့။ အဲ့ဒီ Hooks အကြောင်းကို ဒီနေရာမှာ ရှင်းပြသွားမှာပါ။

React မှာ State တွေကို စီမံဖို့ Class Component တွေကို သုံးရတယ်။ အကယ်၍ Functional Component တွေ သုံးချင်ရင်တော့ State တွေကို တိုက်ရိုက်စီမံလို့ ရမှာမဟုတ်ပဲ Redux လို နည်းပညာမျိုးရဲ့ အကူအညီကို ယူရမှာဖြစ်ကြောင်းကို လက်ရှိလေ့လာနေသူတိုင်း သိရှိကြပြီးသားပါ။ ဒါပေမယ့် စာနွှေးပြီးသား ဖြစ်သွားအောင် နမူနာတစ်ချို့ ပြန်ဖော်ပြပေးပါမယ်။

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [ 'one', 'two' ]
        }
        
        this.add = this.add.bind(this)
    }

    add() {
        this.setState({
            data: [ ...this.state.data, 'three' ]
        })
    }

    render() {
        return (
            <div>
                <ul>
                    {this.state.data.map(item => {
                        return <li>{item}</li>
                    })}
                </ul>
                <button onClick={this.add}>Add</button>
            </div>
        )
    }
}

ဒါဟာ Class Component တစ်ခုဖြစ်ပြီး data လို့ခေါ်တဲ့ State ပါဝင်တယ်။ နှိပ်လိုက်ရင် data State မှာ တစ်ခုထပ်တိုးပေးတဲ့ add() Method ပါဝင်တယ်။ ကူးယူစမ်းသပ်ဖို့ မဟုတ်ပဲ ဖတ်ရှုလေ့လာဖို့သာ ဖြစ်ပါတယ်။ အတက်နိုင်ဆုံး ကုဒ်ကိုတိုအောင်လျှော့ရေးထားလို့ မပြည့်စုံပါဘူး။ ဥပမာ - <li> တွေမှာ key Attribute ပါဝင်သင့်ပေမယ့် ထည့်မထားသလို Button ကို ဘယ်နှစ်ကြိမ်နှိပ်နှိပ် data State မှာ တိုးသွားမယ့် တန်းဖိုးက တစ်ခုတည်းပါ။ ဒါပေမယ့် အလုပ်လုပ်ပုံက အရေးမကြီးပါပဲ။ အရေးကြီးတာက Class Component တွေမှာ State တွေကို ဒီလိုစီမံတယ်ဆိုတဲ့ အချက်ကသာ အရေးကြီးတာပါ။ ဒီ Class ကို ပိုတိုသွားအောင် Class Field လို့ခေါ်တဲ့ ရေးထုံးသစ်နဲ့ ပြောင်းရေးပါဦးမယ်။

class App extends React.Component {
    state = {
        data: [ 'one', 'two' ]
    }

    add = () => {
        this.setState({
            data: [ ...this.state.data, 'three' ]
        })
    }

    render() {
        return (
            <div>
                <ul>
                    {this.state.data.map(item => {
                        return <li>{item}</li>
                    })}
                </ul>
                <button onClick={this.add}>Add</button>
            </div>
        )
    }
}

constructor မပါတော့ပဲ add() ကိုလည်း Arrow Function အဖြစ် ပြောင်းလဲ ရေးသားလိုက်လို့ bind(this) မလိုအပ်တော့ပါဘူး။ ကျန်တာတော့ အတူတူပါပဲ။ ဒီကုဒ်ကို Functional Component အဖြစ် ပြောင်းလဲရေးသားမယ်ဆိုရင် ဒီလို ရေးနိုင်ပါတယ်။

function App(props) {
    return (
        <div>
            <ul>
                {props.data.map(item => {
                    return <li>{item}</li>
                })}
            </ul>
        </div>
    )
}

/* OR */

const App = (props) => {
    return (
        <div>
            <ul>
                {props.data.map(item => {
                    return <li>{item}</li>
                })}
            </ul>
        </div>
    )
}

State ပါဝင်ခြင်းမရှိပဲ ဒီ Component ကို ခေါ်ယူစဉ် ထည့်သွင်းပေးတဲ့ props ကိုသာ အသုံးပြုနိုင်မှာ ဖြစ်ပါတယ်။ ဥပမာ -

<App data={['one', 'two']} />

ဒါပေမယ့် Redux ရဲ့ အကူအညီ ယူလိုက်မယ်ဆိုရင်တော့ Functional Component တွေမှာလည်း State တွေ စီမံအသုံးပြုနိုင်သွားမှာပါ။

const App = (props) => {
    return (
        <div>
            <ul>
                {props.data.map(item => {
                    return <li>{item}</li>
                })}
                <button onClick={props.add}>Add</button>
            </ul>
        </div>
    )
}

var ReduxApp = connect(state => {
    return {
        data: state.data
    }
}, dispatch => {
    return {
        add: () => {
            dispatch({ type: 'ADD' })
        }
    }
})(App)

var store = createStore(state = { data: ['one', 'two'] }, (action) => {
    if(action.type === 'ADD') {
        return { 
            data: [ ...state.data, 'three' ]
        }
    }

    return state;
})

<Provider store={store}>
    <ReduxApp />
</Provider>

"အလုပ်တွေရှုပ်လိုက်တာ" လို့ အခုမှလေ့လာတဲ့သူတွေ တွေးမှာသေချာပေမယ့်၊ Rockstar တန်းမှာ လက်ရှိတက်နေတဲ့သူတွေကတော့ ဒီနည်းကပေးတဲ့ အကျိုးရလဒ်ကို သိရှိကြပြီးဖြစ်ပါတယ်။ အခုတော့ အလားတူအကျိုးရလဒ်မျိုးကို အခုလိုရှုပ်ထွေးတဲ့ Redux ကနေ တစ်ဆင့်ခံနေစရာ မလိုတော့ပဲ Feature သစ်ဖြစ်တဲ့ Hooks ကို အသုံးပြုနိုင်တော့မှာပဲ ဖြစ်ပါတယ်။ အထက်မှာ ရေးခဲ့တဲ့ကုဒ်ကို Hooks အသုံးပြုပြီး အခုလို ရေးသားနိုင်မှာပါ။

const App = (props) => {
    const [data, setData] = useState(['one', 'two']);
    
    return (
        <div>
            <ul>
                {data.map(item => {
                    return <li>{item}</li>
                })}
                <button onClick={() => {
                    setData([...data, 'three'])
                }}>Add</button>
            </ul>
        </div>
    )
}

ဒါပါပဲ။ ရေးထုံးအများကြီး ရိုးရှင်းသွားပါပြီ။ ဒီနေရာမှာ အသုံးပြုခဲ့တဲ့ Hooks Function က တစ်ခုတည်းပါ။ useState() ဖြစ်ပါတယ်။ useState() Function ဟာ ရလဒ်နှစ်ခုကို Return ပြန်ပေးပါတယ်။ ပထမတစ်ခုက State Data ဖြစ်ပြီး ဒုတိယတစ်ခုက အဲ့ဒီ State Data ကို စီမံနိုင်တဲ့ Function ပါ။ ပေးထားတဲ့ နမူနာမှာ data ဟာ State Data ဖြစ်သွားပြီး setData ကတော့ data ကို စီမံနိုင်တဲ့ Function ပေါ့။ ဒီ Function နဲ့ State ကို ပြောင်းလိုက်ရင် ထုံးစံအတိုင်း Component ကလည်း အလိုအလျှောက် လိုက်ပြောင်းပေးသွားမှာ ဖြစ်ပါတယ်။

useState() အပြင် useEffect(), useContext() စတဲ့ တစ်ခြား Hook Function တွေ ရှိပါသေးတယ်။ ဒါတွေ အကြောင်းတော့ ခေါင်းစားမခံပါနဲ့ဦး။ useState() ရဲ့ အကူအညီနဲ့ Functional Component တွေမှာ State ကို တိုက်ရိုက် စီမံအသုံးပြုလို့ ရတာနဲ့တင် အများကြီးအသုံးဝင်နေပါပြီ။

React နဲ့ပက်သက်တဲ့ တစ်ခြား အဆင့်မြင့်အကြောင်းအရာတွေဖြစ်တဲ့ Context တို့ Suspense တို့လို လုပ်ဆောင်ချက်တွေ ရှိပါသေးတယ်။ ဒါတွေအကြောင်းကို အခြေအနေပေးမယ်ဆိုရင် နောက်တော့မှ ထပ်ရှင်းပြပါဦးမယ်။

Thanks ဆရာ

Thanks sir

👍