深入詳解React生命週期

掛載-更新-解除安裝

1. 掛載

• constructor
  constructor() 在React元件掛載之前被呼叫，在為React.Component子類實現建構函式時，應在其他語句之前呼叫 super()。
• static getDerivedStateFromProps(nextProps, state)
  getDerivedStateFromProps() 在呼叫 render方法之前呼叫，在初始化和後續更新都會被呼叫。
  引數：第一個引數為即將更新的 props, 第二個引數為上一個狀態的 state , 可以比較props 和 state來加一些限制條件，防止無用的state更新。
  返回：返回一個物件來更新 state, 如果返回 null 則不更新任何內容
• render
  用於渲染dom, render()方法必須返回reactDOM
• componentDidMount
  componentDidMount() 在元件掛載後 (插入DOM樹後) 立即呼叫，componentDidMount() 是傳送網路請求、啟用事件監聽方法的好時機，並且可以在 此鉤子函式裡直接呼叫 setState()

2. 更新

• static getDerivedStateFromProps()
• shouldComponentUpdate(nextProps, nextState)
  shouldComponentUpdate() 在元件更新之前呼叫，可以控制組件是否進行更新， 返回true時元件更新， 返回false則不更新。
  引數：包含兩個引數，第一個是即將更新的 props 值，第二個是即將跟新後的 state 值，可以根據更新前後的 props 或 state 來比較加一些限制條件，決定是否更新，進行效能優化
  不建議在 shouldComponentUpdate() 中進行深層比較或使用 JSON.stringify()。這樣非常影響效率，且會損害效能
  
  不要 shouldComponentUpdate 中呼叫 setState()，否則會導致無限迴圈呼叫更新、渲染，直至瀏覽器記憶體崩潰
• render
• getSnapshotBeforeUpdate(prevProps, prevState)
  getSnapshotBeforeUpdate() 在最近一次的渲染輸出被提交之前呼叫。也就是說，在 render 之後，即將對元件進行掛載時呼叫。

它可以使元件在 DOM 真正更新之前捕獲一些資訊（例如滾動位置），此生命週期返回的任何值都會作為引數傳遞給 componentDidUpdate()。如不需要傳遞任何值，那麼請返回 null

• componentDidUpdate(prevProps, prevState, snapshot)
  componentDidUpdate() 會在更新後會被立即呼叫。首次渲染不會執行
  引數：包含三個引數，第一個是上一次props值。 第二個是上一次state值。如果元件實現了 getSnapshotBeforeUpdate() 生命週期（不常用），第三個是“snapshot” 引數傳遞

3. 解除安裝

• componentWillUnmount
  componentWillUnmount() 在元件即將被解除安裝或銷燬時進行呼叫。
  是取消網路請求、移除監聽事件、清理 DOM 元素、清理定時器等操作的好時機

案例參考原連結