[筆記] React Hooks 起來 – Ch5 – useState 和 useEffect @地瓜大的飛翔旅程

章節連結

內容
程式碼
參考資料
系列文章

因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記下從遠端獲取 API 資料，以及使用 useEffect 時要注意的事項。

內容

1. useEffect 是在元件編譯完後，才去執行其內的函式
2. 你必須要加上 dependencies 來確保其不會一直重新渲染導致無權迴圈。這個值可以被視為一個觀察的值 (如同 Vue 中的 watch 概念 )，當其內的值有變動時，那就要重新渲染一次。要注意這邊的變動是根據 by Value 或是 by Reference 來比較的
3. useEffect 中的 effect，指的是跟 React 本身無關，但需要執行的動作，像是發起遠端請求、手動更新 DOM…等
4. 當佈署到 Github Pages 時，你的 token 變數可以放在 github-actions 中
5. 不要直接呼叫 onClick 函式，會導致一開始渲染時有重複呼叫的錯誤，可改寫成 () => {} 的形式
6. useState 取代是「全部取代」，所以需要先用解構賦值的方法，將原有的保留下來
7. React.StrictMode 會多次呼叫元件以檢測副作用
8. 因為 useEffect 的 dependencies 在搭配 lint 的檢查規則時，會需要將所有有用到的參照標明。因此你在使用 setState 的方法時，一定要使用 callback 中的 preState 才能避免錯誤

const [currentWeather, setCurrentWeather] = useState({
    locationName: "",
    description: "多雲時晴",
    windSpeed: 0,
    temperature: 0,
    rainPossibility: 48.6,
    observationTime: "2000-01-01 00:00:00",
})

// ok
setCurrentWeather(preWeather => ({
    ...preWeather,
    locationName,
    windSpeed: weatherElements.WDSD,
    temperature: weatherElements.TEMP,
    observationTime: time.obsTime,
}))

// warning happended
setCurrentWeather({
  ...currentWeather,
  locationName,
  windSpeed: weatherElements.WDSD,
  temperature: weatherElements.TEMP,
  observationTime: time.obsTime,
})