reactV16理解

在 V16 版本中引入了 Fiber 機制。這個機制必定程度上的影響了部分生命週期的調用，而且也引入了新的 2 個 API 來解決問題。

在以前的版本中，若是你擁有一個很複雜的複合組件，而後改動了最上層組件的 state，那麼調用棧可能會很長

 

 

調用棧過長，再加上中間進行了複雜的操做，就可能致使長時間阻塞主線程，帶來很差的用戶體驗。Fiber 就是爲了解決該問題而生。

Fiber 本質上是一個虛擬的堆棧幀，新的調度器會按照優先級自由調度這些幀，從而將以前的同步渲染改爲了異步渲染，在不影響體驗的狀況下去分段計算更新。

 

 

對於如何區別優先級，React 有本身的一套邏輯。對於動畫這種實時性很高的東西，也就是 16 ms 必須渲染一次保證不卡頓的狀況下，React 會每 16 ms（之內） 暫停一下更新，返回來繼續渲染動畫。

對於異步渲染，如今渲染有兩個階段：reconciliation 和 commit 。前者過程是能夠打斷的，後者不能暫停，會一直更新界面直到完成。

Reconciliation 階段

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate

Commit 階段

• componentDidMount
• componentDidUpdate
• componentWillUnmount

V16 生命週期函數用法建議

class ExampleComponent extends React.Component {
  // 用於初始化 state
  constructor() {}
  // 用於替換 `componentWillReceiveProps` ，該函數會在初始化和 `update` 時被調用
  // 由於該函數是靜態函數，因此取不到 `this`
  // 若是須要對比 `prevProps` 須要單獨在 `state` 中維護
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判斷是否須要更新組件，多用於組件性能優化
  shouldComponentUpdate(nextProps, nextState) {}
  // 組件掛載後調用
  // 能夠在該函數中進行請求或者訂閱
  componentDidMount() {}
  // 用於得到最新的 DOM 數據
  getSnapshotBeforeUpdate() {}
  // 組件即將銷燬
  // 能夠在此處移除訂閱，定時器等等
  componentWillUnmount() {}
  // 組件銷燬後調用
  componentDidUnMount() {}
  // 組件更新後調用
  componentDidUpdate() {}
  // 渲染組件函數
  render() {}
  // 如下函數不建議使用
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  UNSAFE_componentWillReceiveProps(nextProps) {}
}