- 什麼是state?為什麼我們會需要使用state?
- 如何練習使用state?
- useState()
- useReducer
- context API/external tools Redux
- 如何思考狀態state?
- 何時該使用state
- 何處該放置state
- 狀態的型別
state概觀
如果我們想要網頁的UI根據使用者的行為改變UI的外觀,就需要使用state
state狀態就像是一個元件的記憶體/大腦
圖片摘自 Udemy-The Ultimate React Course 2023: React, Redux & More 筆記
一個單一元件的state改變就會引發React 去重新渲染這個單一元件
state就是React能夠保持在使用者介面和資料一致性的工具,我們改變了state也就改變了UI
圖片摘自 Udemy-The Ultimate React Course 2023: React, Redux & More 筆記
練習
想要的效果是,
當我點擊next,step的狀態會從1跑到2;
再次點擊,step會從2跑到3;
按下previous則是回返;
1.引入useState hook 並建立state
2.在JSX使用狀態
3.在事件流程中使用state並利用setStep函式改變state
記得一個口號:
在React中,只要你想改變UI,那你就要改變state