React 生命週期
大體上分三類
- Mount
- Update
- Unmount
Mount
- constructor()
componentWillMount()- render()
- componentDidMount()
Update
componentWillReceiveProps()/ static getDerivedStateFromProps()- shouldComponentUpdate()
componentWillUpdate()/ getSnapshotBeforeUpdate()- render()
- componentDidUpdate()
Unmount
- componentWillUnmount()
生命週期方法
componentWillMount（即將移除）
componentWillMount()
複製程式碼當 React 渲染一個元件的是你，首先進入該方法。
Note：componentWillMount()是唯一一個在render()之前呼叫的生命週期方法。因此是在服務端渲染中唯一被呼叫的方法。
因為componentWillMount()將被刪除，所以官方推薦使用constructor()替代該方法
**Update：**該方法應該在新的程式碼中避免使用
State
可以在該方法中使用this.setState()但是不一定觸發重新渲染。
componentDidMount
componentDidMount()
複製程式碼當該方法被呼叫時候，React 已經渲染了元件並且將元件插入 DOM。因此如有有任何依賴於 DOM 的初始化，應該放在這裡。
State
該方法中可以使用this.setState()方法，它將觸發重新渲染。
Use Cases
- fetch data
- 依賴 DOM 初始化
- 新增事件監聽
componentWillReceiveProps（即將移除）
componentWillReceiveProps(nextProps)
複製程式碼當元件接收到新的props，該方法會首先被呼叫，但是需要注意一點，即使props並沒有發生改變，該方法也會被呼叫，所以使用該方法的時候要確保比較this.props和nextProps，避免不必要的渲染。
Update：componentWillReceiveProps將被移除，使用新的static getDerivedStateFromProps代替。
static getDerivedStateFromProps（新增）
static getDerivedStateFromProps(props, state)
複製程式碼每次render都會呼叫該方法——即使props沒有發生變化。所以要謹慎使用。
shouldComponentUpdate
shouldComponentUpdate(nextState, nextProps)
複製程式碼有些時候需要避免不必要的渲染，可以使用該方法。返回false意味著 React 不執行componentWillUpdate()，render()，componentDidUpdate()。
該方法在初始化時候不執行。
**Note：**根據 React 文件，React 可能將shouldComponentUpdate視做提示而不是嚴格的根據它的返回結果決定是否執行，也就是說可能出現shouldComponentUpdate返回false，但是還是發生重新渲染。
State
在該方法中不可以設定setState。
Use Case
如前所述，該方法可能有有問題。React 官方提供了另一個解決辦法，所以如果發現某個元件慢，可以使用React.PureComponent替代React.component，它將對props和state提供一個淺層對照。
componentWillUpdate（即將移除）
componentWillUpdate(nextProps, nextState)
複製程式碼該方法在被渲染前呼叫。shouldComponentUpdate在新的props進入元件或者state改變的時候呼叫。
該方法在初始渲染時候不被呼叫。
Update：shouldComponentUpdate即將被移除。
State
在該方法中不能呼叫setState。
Use Cases
shouldComponentUpdate方法在render()前會被準確呼叫，所以在該方法中做任何跟 DOM 相關的操作是不合適的，因為很快會過期。
常見的用例有：
- 根據
state的變化設定變數 - 派發事件
- 開始動畫
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState)
複製程式碼該方法在 React 16.3 被新增並且它配合componentDidUpdate。該方法應該覆蓋了舊方法shouldComponentUpdate的所有用例。
getSnapshotBeforeUpdate在元素被渲染並寫入 DOM 之前呼叫，這樣，你在 DOM 更新前捕獲 DOM 資訊（例如：滾動位置）。
應該返回一個snapshot值或null，無論返回什麼，shouldComponentUpdate都可以接收到snapshot引數。
Use Cases
如果想要獲得一個 list 或者一個聊天視窗中的滾動位置，可以在getSnapshotBeforeUpdate中取到這些資訊。然後將滾動資訊作為snapshot值返回。這允許在更新DOM後在componentDidUpdate中設定正確的滾動位置。
componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot)
複製程式碼React 更新元件後，呼叫componentDidUpdate。該方法在初始渲染時候不會被呼叫。
Use Cases
如果元件更新後需要操作 DOM，可以使用該方法。
componentWillUnmount
componentWillUnmount()
複製程式碼在解除安裝，銷燬元件之前呼叫該方法。
State
在解除安裝元件時候不能設定 State
Use Cases
使用該方法清理 actions。
- 刪除在
componentDidMount或其他地方新增的事件監聽 - 斷開網路請求
- 清空計時器
- 清理在
componentDidMount中建立的 DOM 元素