React-[基礎篇]- React中的狀態state


  • 什麼是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








你可能感興趣的文章

Q&A [2]:資料結構與演算法間的愛恨情仇

Q&A [2]:資料結構與演算法間的愛恨情仇

[html] 暗藏玄機的跨域連結 - link rel

[html] 暗藏玄機的跨域連結 - link rel

留言板、訂正筆記

留言板、訂正筆記






留言討論