React生命週期

1、React 15 版本的生命週期

• 掛載階段

  • constructor 構造函數

  • componetWillMount 組件初始化渲染前調用

  • render 組件渲染

  • componentDidMount 組件掛載到DOM後調用

• 更新階段

  • componentWillReceiveProps 組件將要接收新props前調用
  • shouldComponentUpdate 組件是否須要更新
  • componentWillUpdate 組件更新前調用
  • render 組件渲染
  • componentDidUpdate 組件更新後調用

• 卸載階段

  • componentWillUnmount 組件卸載前調用

2、16版本的生命週期

• 掛載階段

  • constructor構造函數，若是不初始化 state 或不進行方法綁定，則不須要爲 React 組件實現構造函數。

  • static getDerivedStateFromProps(props, state) 會在調用 render 方法以前調用，而且在初始掛載及後續更新時都會被調用。它應返回一個對象來更新 state，若是返回 null 則不更新任何內容。

  • render

  • componentDidMount 組件掛載到DOM後調用。在這裏能夠直接調用 setState()。它將觸發額外渲染，但此渲染會發生在瀏覽器更新屏幕以前。從而保證了即便在render()兩次調用的狀況下，用戶也不會看到中間狀態。但它會致使性能問題，因此要謹慎使用。

• 更新

  • static getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapShotBeforeUpdate 在最近一次渲染輸出（提交到 DOM 節點）以前調用。它使組件能在發生更改以前從 DOM 捕獲一些信息（例如，滾動位置）。它的任何返回值將做爲參數傳遞給componentDidUpdate。
  • componentDidUpdate 組件更新後調用，首次渲染不會執行此方法。在這裏直接調用setState()時，必須將setState()包裹在一個條件語句裏，不然會致使死循環。它還會致使額外的從新渲染，雖然用戶不可見，但會影響組件性能。

• 卸載

  • componentWillUnmount 這裏不該調用setState()，由於組件不會從新渲染。

• 錯誤處理

  • static getDerivedStateFromError 在後代組件拋出錯誤後被調用，將拋出的錯誤做爲參數，並返回一個值以更新 state。
  • componentDidCatch

3、爲何要移除componentWillMount、componentWillReceivepPops和componentWillUpdate？

• componentWillMount：異步渲染機制可能會致使單個組件實例能夠屢次調用該方法。不少開發着目前會將事件綁定、異步請求等寫在componentWillMount中，一旦異步渲染時componentWillMount被屢次調用，將會致使：
  • 進行重複的事件監聽，沒法正常取消重複的 Listener，更有可能致使內存泄漏；
  • 發出重複的異步網絡請求，致使 IO 資源被浪費；
  • 在服務端渲染時，componentWillMount會被調用，可是會因忽略異步獲取的數據致使 IO 資源被浪費。
• 大多數開發者使用componentWillUpdate的場景是配合componentDidUpdate，分別獲取 rerender 先後的視圖狀態，進行必要的處理。但隨着 suspense、time slicing、異步渲染等機制的到來，render 過程能夠被分割成屢次完成，還能夠被暫停甚至回溯，這致使**componentWillUpdate和componentDidUpdate執行先後可能會間隔很長時間**，足夠使用戶進行交互操做更改當前組件的狀態，這樣可能會致使難以追蹤的 bug。

---

參考：

1. React 高頻面試題梳理，看看面試怎麼答？（上）： mp.weixin.qq.com/s/3jmJgZFkt…
2. 【React官網】React.Component： zh-hans.reactjs.org/docs/react-…
3. 【IMWeb】談談新的 React 新的生命週期鉤子： imweb.io/topic/5b8ca…