React是單向數(shù)據(jù)流
組件初始化(initialization)階段：
constructor // 構造器 設置組件的初始化狀態(tài)
組件的掛載(Mounting)階段
componentWillMount // 即將載入dom
組件即將被渲染到頁面之前觸發(fā)，此時可以進行開啟定時器、向服務器發(fā)送請求等操作
render
組件渲染
componentDidMount // 已經(jīng)載入dom 重要！?。?！
組件已經(jīng)被渲染到頁面中后觸發(fā)：此時頁面中有了真正的DOM的元素，可以進行DOM相關的操作
組件的更新(update)階段：
componentWillReceiveProps // 即將接受參數(shù)
組件接收到屬性時觸發(fā)
shouldComponentUpdate // 判斷是否允許組件更新 true允許組件更新，false阻止組件更新
當組件接收到新屬性，或者組件的狀態(tài)發(fā)生改變時觸發(fā)。組件首次渲染時并不會觸發(fā)
一般我們通過該函數(shù)來優(yōu)化性能
componentWillUpdate // 即將更新
組件即將被更新時觸發(fā)
render
組件渲染
componentDidUpdate // 已經(jīng)更新
組件被更新完成后觸發(fā)。頁面中產(chǎn)生了新的DOM的元素，可以進行DOM操作
銷毀階段：
componentWillUnmount // 即將被銷毀
組件被銷毀時觸發(fā)。這里我們可以進行一些清理操作，例如清理定時器，取消Redux的訂閱事件 和 清除componentDidMount中手動創(chuàng)建的DOM元素等等。
React v16.4 的生命周期
React V16中 推出了Fiber，如果開啟 異步render，那么 React Fliber 將在兩個階段：
第一個階段Reconciliation Phase和第二階段Commit Phase.
在第一階段Reconciliation Phase，React Fiber會找出需要更新哪些DOM，這個階段是可以被打斷的；但是到了第二階段Commit Phase，那就一鼓作氣把DOM更新完，絕不會被打斷。
與此相關的，就牽扯到了 生命周期函數(shù)。所以在render前，可能會多次調用生命周期函數(shù)。具體如下：
第一階段可能會調用下面這些生命周期函數(shù)，說是“可能會調用”是因為不同生命周期調用的函數(shù)不同。
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
下面這些生命周期函數(shù)則會在第二階段調用。
componentDidMount
componentDidUpdate
componentWillUnmount
新的生命周期
getDerivedStateFromProps和getSnapshotBeforeUpdate
getDerivedStateFromProps
static getDerivedStateFromProps(props, state) 在組件創(chuàng)建時和更新時的render方法之前調用，它應該返回一個對象來更新狀態(tài)，或者返回null來不更新任何內(nèi)容。
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate() 被調用于render之后，可以讀取但無法使用DOM的時候。它使您的組件可以在可能更改之前從DOM捕獲一些信息（例如滾動位置）。此生命周期返回的任何值都將作為參數(shù)傳遞給componentDidUpdate（）。
