[筆記] React Hooks 起來 – Ch3

因為實務上的需要來熟悉 React,就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這篇主要是記錄 props 的傳遞,寫法上跟 Vue3 的 setup 裝飾子非常相似,僅需抓緊「父層宣告監聽的值和其方法」才能自由的傳遞給子層使用。react logo


內容

1. 採用 tailwind css 的情況下,className 寫好樣式就可以說是完成了。幾乎不太需要再額外宣告 scoped 的樣式
2. 傳統的 css 若要快速引用,可以用 css-to-tailwind 轉換器,再一個個貼到對應的 class 上
3. 在「頁面層」宣告變數、方法,傳遞給子層的 Component 使用
4. props 的 interface 需要自行定義,可以透過 IDE 提示來取得


程式碼

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


系列文章

  • [筆記] 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 – 前導
  • [筆記] React Hooks 起來 – Ch4 – SVG
  • [筆記] React Hooks 起來 – Ch1 ~ Ch2
  • 按讚加入粉絲團

    延伸閱讀