[誰來跟我 React 一下] 生命週期與 useEffect
constructor 、 render 、 componentDidMount 、 componentDidUpdate 、 componentWillUnmount 、 useEffect
由於 React 的寫法分成 class component 與 functional component ，在處理生命週期的方式上也不太一樣。過去在 Vue 時的一些習慣，導致我剛開始一直看不懂 useEffect 與 componentDidMount 等間的關係。不過 Vue 和 React 的邏輯畢竟還是有所不同，學習時必須轉換一下自己的腦袋比較好。
class component 的生命週期
在 class component 中，使用的概念很容易理解，就是當元件被掛載時，如果我要在這個階段觸發某事，就在對應函式撰寫要發生的。列出幾個比較常見的生命週期名稱與順序：
constructor > render > componentDidMount > render > componentDidUpdate > componentWillUnmount- constructor
constructor 其實是一個 ES6 語法糖，用以初始化、建構物件。只有一開始會出現。
- render
把 JSX 渲染至畫面。
- componentDidMount
API 串接、綁定 DOM 都在此處理，但若有綁定 DOM ，要記得在 unmounting 移除監聽。只有在第一次 render 後會出現，之後重渲染也不會再經歷此階段。
- componentDidUpdate
狀態更新或重渲染時就會觸發，但須自行寫判斷式判斷是否需重渲染，可用來 call API 、 setState 。
- componentWillUnmount
元件移除時觸發、清除綁定等，要注意的是在此執行 setState 不會 re-render 。
useEffect
有 hook 後，在 functional component 能用 useEffect 來實現 componentDidMount 、 componentDidUpdate 和 componentWillUnmount 。
- componentDidMount
componentDidMount 的定義是第一次 render 後，只會觸發一次。在 useEffect 中，只要在第二個參數中放入空陣列，就只會觸發一次。
useEffect(()=>{
console.log('觸發 componentDidMount')
},[]);- componentWillUnmount
元件卸載時的行為，要放在 return 的函式裡。第二個參數一樣放空陣列。
useEffect(()=>{
return()=>{
console.log('觸發 componentWillUnmount')
}
},[]);- componentDidUpdate
componentDidUpdate 的定義是不論第一次或重 render ，只要 render 就會觸發。我們可以利用 useEffect 的第二個參數，來達到監聽的效果，監聽對象改變時，就會觸發。
useEffect(()=>{
console.log('count 改變了，觸發 componentDidUpdate')
},[count]);系列連結
Medium 不太好找前後篇文章，所以在這個系列文章最後，放入任意門連結，希望能幫助到你！
