30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格
React
這篇回到 Hook 身上，來了解影響渲染也很重要的 Hook，useEffect!
useEffect
如果 useState 是用來儲存狀態，useEffect 看名字就知道是要用來影響某些事情
沒錯! 就是會發生某些事情，也可稱之 side effect!
語法及用途
useEffect 語法
useEffect(() => {
A
return () => {} //C
}, [B])
useEffect 的用途就是會在整個畫面渲染完成時，再執行裡面的動作
第一次以及隨後每次的渲染，都必定會執行useEffect
聽起來是不是很適合這時候串接 API 處理資料請求、更新一些計時、畫面更新等等呢?
那如果我不想每次都渲染呢?
沒問題，B 處的地方為 dependencies，填入對應的資料，通常都是填入 state
第一次執行後，每當dependencies裡面的資料有更新，就會再跑一次useEffect
回到語法上來看：
- A 處就是放需要執行的動作，例如這邊就可以填入 API 請求
- B 處(dependencies)則是會綁定特定資料，第一次進入畫面執行後過，若資料更新才會再執行
useEffect 的移除動作
還有一個 C 處 return function，這邊寫法是固定的
這一處的 return function 會再 useEffect 要執行之前，先執行一次
也就是說
1.
- 第一次進入畫面，渲染完成
- (A) 執行 useEffect 裡面的動作，執行完畢
- (B) 若有 dependencies，useEffect 會好好觀察有沒有改變
- (C) 若 dependencies 裡的資料改變了，
會先執行 return function 內的動作 - (A) 再來執行預計的動作
- and so on…
- 另一個情況則是當元件從 DOM 上消失，也會執行，暫且先不理會這一點
-
通常都要避免監聽器疊加時，因前面提到，每次都會執行的特點
若同一個元素一直新增一樣的監聽器，可能會瘋掉吧
所以為了維持一個監聽器的數量，先移除、再安裝，就非常適合這時候使用
只要return function，就會屬於移除動作
為何要等渲染完成再執行其他動作?
在逛網頁的時候，有沒有發現當你第一次點進去時
沒有馬上出現資料，很常看到轉圈圈、閃爍的畫面、或是進度條…等等
由於跟後端請求資料時，難免會有時間差(或本來就很花時間)
為了不讓使用者乾等，會先渲染大部分的架構，
再用動畫方式(如：閃爍畫面)，來讓使用者知道有正在抓資料
總不可能要全部弄好再渲染，那這樣使用者可能等不到你的畫面就離開了……
SUM UP
兩大 HOOK，就可以將原生的方式完全拋諸於腦後，但這兩個只是最基本的
- useState: 儲存狀態及資料的好幫手
- useEffect: 執行渲染期間的其他動作好幫手
在小專案中非常好用，但大專案的話就有不同的用法跟容身之地
下一篇要記錄啥呢?? 8/17