[筆記] React Hooks 起來 – Ch4 – 增加狀態管理

Posted onAuthorANDY LIEN

章節連結

因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記下簡易的狀態管理機制，搭配深色模式切換使用。

react logo

內容

1. 為了要符合 enum 的型別宣告，需要單獨載入 enum 檔案取其值才不會報錯
2. function component 的 props 可以宣告在 props 之後，而不用使用 React.FC
3. 若你要加上樣式，可以先用 styled.btn 後，再行寫入
4. 跟 Component 相關的 styled 名稱，其名稱常見的規則是 Styled<元件名稱>

程式碼

https://github.com/andy922200/practice-20230615/commit/eec26d8c1108b0469dec2003b2cfb9d3b8c77972

參考資料

1. Define a Theme
2. How to Use ‘React.FC’ Children Prop in React 18 with TypeScript

系列文章

  • [筆記] React Hooks 起來 – Ch7 – 切換畫面元件
  • [筆記] React Hooks 起來 – Ch6 – 建立自己的 Hook
  • [筆記] React Hooks 起來 – Ch6 – useMemo 的使用
  • [筆記] React Hooks 起來 – Ch5 – useState 和 useEffect
  • [筆記] React Hooks 起來 – Ch5 – useCallback 和 TypeScript 注意事項
  • [筆記] React Hooks 起來 – Ch4 – 實作深色主題
  • [筆記] React Hooks 起來 – Ch4 – 前導
  • [筆記] React Hooks 起來 – Ch4 – SVG
  • [筆記] React Hooks 起來 – Ch3
  • [筆記] React Hooks 起來 – Ch1 ~ Ch2
    • 按讚加入粉絲團

    延伸閱讀