React 元件的生命週期的三個狀態：
Mounting ： 掛載過程
Updating ： 更新過程
Unmounting ： 解除安裝過程
React 舊版
生命週期
掛載 Mount
當元件例項被建立並插入 DOM 中時。
constructor ： 初始化 state，為事件處理函式繫結例項。
componentWillMount ： 在掛載之前被呼叫
render
componentDidMount ： 會在元件掛載後立即呼叫。依賴於 DOM 節點的初始化、請求資料、新增訂閱應該放在這裡。
更新 Update
當元件的 props 或 state 發生變化時會觸發更新。
componentWillReceiveProps ： 接收到一個新的 props 時被呼叫觸發，初始渲染不會呼叫此方法。
shouldComponentUpdate ： 根據 shouldComponentUpdate（） 的返回的 bool 值來決定是否重新渲染元件。
componentWillUpdate ： 當元件收到新的 props 或 state 時，會在渲染之前呼叫 初始渲染不會呼叫此方法。
render
componentDidUpdate ： 會在更新後會被立即呼叫。首次渲染不會執行此方法。
解除安裝 Unmount
當元件從 DOM 中移除時會呼叫如下方法
componentWillUnmount ： 會在元件解除安裝及銷燬之前直接呼叫。
class Parent extends Component { constructor（props） { super（props）； this。state = { data：0 } console。log（‘Parent ——- constructor’）； } componentWillMount（） { console。log（‘Parent ——- componentWillMount’） } componentDidMount（） { console。log（‘Parent ——- componentDidMount’） } componentWillReceiveProps（newProps） { console。log（‘Parent ——- componentWillReceiveProps’） } shouldComponentUpdate（newProps， newState） { console。log（‘Parent ——- shouldComponentUpdate’）； return true； } componentWillUpdate（nextProps， nextState） { console。log（‘Parent ——- componentWillUpdate’）； } componentDidUpdate（prevProps， prevState） { console。log（‘Parent ——- componentDidUpdate’） } setNewNumber = （）=>{ this。setState（{ data： this。state。data + 1 }） } death = （） => { ReactDOM。unmountComponentAtNode（document。getElementById（‘root’）） } render（） { console。log（‘Parent ——- render’）； return （
{this。props。myNumber}
React 新版
即將廢棄
componentWillMount ———> UNSAFE_componentWillMount
componentWillReceiveProps ———> UNSAFE_componentWillReceiveProps
componentWillUpdate ———> UNSAFE_componentWillUpdate
新增
static getDerivedStateFromProps
getSnapshotBeforeUpdate
元件掛載 Mount
當元件例項被建立並插入 DOM 中時，其生命週期呼叫順序如下：
constructor ： 初始化 state，為事件處理函式繫結例項。
static getDerivedStateFromProps ： 返回一個狀態物件或者null
render
componentDidMount ： 會在元件掛載後立即呼叫。依賴於 DOM 節點的初始化、請求資料、新增訂閱應該放在這裡。
更新 Update
當元件的 props 或 state 發生變化時會觸發更新。
static getDerivedStateFromProps ： 返回一個狀態物件或者null
shouldComponentUpdate ： 根據 shouldComponentUpdate（） 的返回的 bool 值來決定是否重新渲染元件
render
getSnapshotBeforeUpdate ： 返回一個 snapshot 或者 null
componentDidUpdate ： 會在更新後會被立即呼叫。首次渲染不會執行此方法。
解除安裝 Unmount
當元件從 DOM 中移除時會呼叫如下方法
componentWillUnmount ： 會在元件解除安裝及銷燬之前直接呼叫。
class Parent extends Component { constructor（props） { super（props）； this。state = { data： 0 } console。log（‘Parent ——- constructor’）； } static getDerivedStateFromProps（props， state） { console。log（‘Parent ——- getDerivedStateFromProps’， props， state）； return null； } getSnapshotBeforeUpdate（prevProps， prevState） { console。log（‘Parent ——- getSnapshotBeforeUpdate’， prevProps， prevState）； return null } componentDidMount（） { console。log（‘Parent ——- componentDidMount’） } shouldComponentUpdate（newProps， newState） { console。log（‘Parent ——- shouldComponentUpdate’）； return true； } componentDidUpdate（prevProps， prevState） { console。log（‘Parent ——- componentDidUpdate’） } setNewNumber = （） => { this。setState（{ data： this。state。data + 1 }） } death = （） => { ReactDOM。unmountComponentAtNode（document。getElementById（‘root’）） } render（） { console。log（‘Parent ——- render’）； return （
