一、是什麼#
生命週期（Life Cycle）的概念應用很廣泛，特別是在經濟、環境、技術、社會等許多領域經常出現，其基本涵義可以通俗地理解為「從搖籃到墳墓」（Cradle-to-Grave）的整個過程
跟 Vue 一樣， React 整個組件生命週期包括從創建、初始化數據、編譯模板、掛載 Dom→渲染、更新→渲染、卸載等一系列過程
二、流程#
這裡主要講述 react16.4 之後的生命週期，可以分成三個階段：
- 創建階段
- 更新階段
- 卸載階段
創建階段#
創建階段主要分成了以下幾個生命週期方法：
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
constructor#
實例過程中自動調用的方法，在方法內部通過 super 關鍵字獲取來自父組件的 props
在該方法中，通常的操作為初始化 state 狀態或者在 this 上掛載方法
getDerivedStateFromProps#
該方法是新增的生命週期方法，是一個靜態的方法，因此不能訪問到組件的實例
執行時機：組件創建和更新階段，不論是 props 變化還是 state 變化，也會調用
在每次 render 方法前調用，第一個參數為即將更新的 props，第二個參數為上一個狀態的 state，可以比較 props 和 state 來加一些限制條件，防止無用的 state 更新
該方法需要返回一個新的對象作為新的 state 或者返回 null 表示 state 狀態不需要更新
render#
類組件必須實現的方法，用於渲染 DOM 結構，可以訪問組件 state 與 prop 屬性
注意： 不要在 render 裡面 setState, 否則會觸發死循環導致內存崩潰
componentDidMount#
組件掛載到真實 DOM 節點後執行，其在 render 方法之後執行
此方法多用於執行一些數據獲取，事件監聽等操作
更新階段#
該階段的函數主要為如下方法：
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
getDerivedStateFromProps#
該方法介紹同上
shouldComponentUpdate#
用於告知組件本身基於當前的 props 和 state 是否需要重新渲染組件，默認情況返回 true
執行時機：到新的 props 或者 state 時都會調用，通過返回 true 或者 false 告知組件更新與否
一般情況，不建議在該周期方法中進行深層比較，會影響效率
同時也不能調用 setState，否則會導致無限循環調用更新
render#
介紹如上
getSnapshotBeforeUpdate#
該周期函數在 render 後執行，執行之時 DOM 元素還沒有被更新
該方法返回的一個 Snapshot 值，作為 componentDidUpdate 第三個參數傳入
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('#enter getSnapshotBeforeUpdate');
return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('#enter componentDidUpdate snapshot = ', snapshot);
}
此方法的目的在於獲取組件更新前的一些信息，比如組件的滾動位置之類的，在組件更新後可以根據這些信息恢復一些 UI 視覺上的狀態
componentDidUpdate#
執行時機：組件更新結束後觸發
在該方法中，可以根據前後的 props 和 state 的變化做相應的操作，如獲取數據，修改 DOM 樣式等
卸載階段#
componentWillUnmount#
此方法用於組件卸載前，清理一些註冊是監聽事件，或者取消訂閱的網絡請求等
一旦一個組件實例被卸載，其不會被再次掛載，而只可能是被重新創建
三、總結#
新版生命週期整體流程如下圖所示：
舊的生命週期流程圖如下：
通過兩個圖的對比，可以發現新版的生命週期減少了以下三種方法：
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
其實這三個方法仍然存在，只是在前者加上了 UNSAFE_ 前綴，如 UNSAFE_componentWillMount，並不像字面意思那樣表示不安全，而是表示這些生命週期的代碼可能在未來的 react 版本可能廢除
同時也新增了兩個生命週期函數：
- getDerivedStateFromProps
- getSnapshotBeforeUpdate