# 生命週期

<style>
.blue{
color:#3288FF;
background-color:#E6F4FF;
padding:4px;
font-size:1.75rem;
}

.red{
color:#FF4D4F;
background-color:#FFF2F0;
padding:4px;
font-size:1.75rem;
}
</style>

## 簡單介紹
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

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

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

#### <font class="blue">static getDerivedStateFromProps(props , state)</font>
> 繼承state，簡稱gDSFP
為了替代componentWillReceiveProps，並且配合componentDidUpdate能夠保持原有的功能
* 一個靜態方法，因此不可以訪問元件的實例（this）
* 可用於：對比前後 props、將 props 轉換為 state

#### <font class="red">render()</font>
> 改變props/state或是強制更新forceUdpate()，render都會重新被執行。

#### <font class="red">componentDidMount()</font>
> 這個component 已經渲染完成的狀態，因此在此呼叫API。
改變state後，**沒辦法**立刻取得新的值。

#### <font class="blue">shouldComponentUpdate(nextProps , nextState)</font>
> 用於控制組件是否需要重新渲染，會返回一個布林值，false表示當props/state改變時不執行render，true表示會執行，強制更新則不會觸發。

#### <font class="blue">getSnapshotBeforeUpdate(prevProps , prevState)</font>
> 更新DOM之前、render執行之後，此時虛擬DOM已經生成，但還沒有渲染到頁面中，可以拿到之前DOM的一些數據內容，需要跟componentDidUpdate一起使用。可用於：保存滾動條位置。

#### <font class="red">componentDidUpdate(prevProps , prevState)</font>
> 改變state後，就會觸發元件更新DOM，因此**可以**立刻取得新的值，但也因此不能使用setState，不然會造成無限循環。

#### <font class="red">componentWillUnmount()</font>
> 會在component 即將卸載前觸發。
可用於：清除定時器。