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








你可能感興趣的文章

React-[元件篇]-傳遞資料透過props

React-[元件篇]-傳遞資料透過props

一看就懂的 React Server Rendering(Isomorphic JavaScript)入門教學

一看就懂的 React Server Rendering(Isomorphic JavaScript)入門教學

[ CSS 05 ] 遮罩裁切相關

[ CSS 05 ] 遮罩裁切相關






留言討論