生命週期

簡單介紹

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

• Mounting：元件被渲染到畫面上
• Updating：元件的內容因為資料的更動而重新渲染
• Unmounting：元件從畫面上消失，移除這個元件

constructor(props)

在元件一開始 mount 的時候，初始化會先經過建構子 constructor，裡面放的super()，是為了使用 this 去取得實體化物件。

static getDerivedStateFromProps(props , state)

繼承state，簡稱gDSFP
為了替代componentWillReceiveProps，並且配合componentDidUpdate能夠保持原有的功能

• 一個靜態方法，因此不可以訪問元件的實例（this）
• 可用於：對比前後 props、將 props 轉換為 state

render()

改變props/state或是強制更新forceUdpate()，render都會重新被執行。

componentDidMount()

這個component 已經渲染完成的狀態，因此在此呼叫API。
改變state後，沒辦法立刻取得新的值。

shouldComponentUpdate(nextProps , nextState)

用於控制組件是否需要重新渲染，會返回一個布林值，false表示當props/state改變時不執行render，true表示會執行，強制更新則不會觸發。

getSnapshotBeforeUpdate(prevProps , prevState)

更新DOM之前、render執行之後，此時虛擬DOM已經生成，但還沒有渲染到頁面中，可以拿到之前DOM的一些數據內容，需要跟componentDidUpdate一起使用。可用於：保存滾動條位置。

componentDidUpdate(prevProps , prevState)

改變state後，就會觸發元件更新DOM，因此可以立刻取得新的值，但也因此不能使用setState，不然會造成無限循環。

componentWillUnmount()

會在component 即將卸載前觸發。
可用於：清除定時器。