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