[筆記] React Hooks 起來 – Ch7 – 切換畫面元件

因為實務上的需要來熟悉 React,就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記下如何在頁面內切換畫面元件。

react logo


內容

1. 一樣可以利用 {} 撰寫 JS 判斷是來決定要渲染什麼內容,無需像 Vue3 使用 v-if
2. v-for, v-bind:key 這類的內容,一樣用 JS 取代
3. 表單處理上,有分為受 React 控制的資料和不受 React 控制的資料。除了 <input type=”file”> 受限於安全性沒辦法給 React 控制外,其餘都建議用 React 管理
4. 當要用 React 控制資料,那會需要用 useState 保存狀態
5. 由父層傳子層,可以用父層的 props 來建立一個屬於自己子層的狀態


程式碼

https://github.com/andy922200/learn-react-from-hook/commit/3d1ca092f8c3599ca84415c443ce6cece9af79c6


系列文章

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

    延伸閱讀