🙌
Map of Hooks_Effect
續上篇的 State Management |狀態管理類
本篇要來介紹 Effect Hooks | 處理副作用
副作用？是什麼…
你只要查 useEffect 做什麼用，都會看到：主要功能是在處理副作用…
說實在的，我真的直到現在都還是不懂副作用是什麼…我到底要處理誰，誰被處理了。
我自己的理解是副作用就是用在資料的不同步渲染、用戶的輸入事件、手動操作 DOM 的時候。
useEffect
基本語法結構
useEffect(() => {
//執行的程式碼
return {
...
}
},[]) //array 變數
重點在於這個 array 變數，當這個變數有變化時，useEffect 會重新執行，
如果留白[]就只會在初次進入畫面的時候執行一次之後就不會再執行了。
...
什麼？你也看不懂上面在寫什麼？沒關係，我們直接來
常見實例
畫面一進來的時候，在 console 我只在第一次渲染時執行 和 count 改變時 0 才執行 兩個都會執行
此時點擊『點擊增加』按鈕，你可以看到只有 count 改變時 1 才執行 ，而第7行的代碼就不會再執行了，就是因為此時 array 變數為留白 []，只會初次渲染
不建議使用 useEffect 的情境：
- 事件驅動的動作(例 Button Click)
在點擊按鈕後執行動作，因為是使用者觸發的，應該直接在事件上處理函數，而不依賴使用useEffect，因為很明確的是需要使用者點擊才發生改變，而不是任何的 state 改變 - 一進入頁面就要取得資料
- 取得資料邏輯分散(重覆撰寫)
- 不支援背景更新
- 容易多次重複請求
更好替代使用React Query或是Next.js
const { data, isLoading, error } = useQuery(['todos'], fetchTodos)
最後に
以上為我個人的基本理解，由於 Hooks 內容較多所以拆成每一個類別比較方便閱讀，如果有什麼想法也歡迎留言跟我分享，讓我可以學習更多。
看其他鐵蚊賽文章
其他的 Hooks 介紹也是從這邊~
Discussion