React的生命週期筆記

React的生命週期筆記

react的生命週期方法

• 掛載

  • constructor()
  • static getDerivedStateFromProps(props, state)
  • render()
  • componentDidMount()

• 更新

  • static getDerivedStateFromProps(props, state)
  • shouldComponentUpdate(nextProps, nextState)
  • render()
  • getSnapshotBeforeUpdate(prevProps, prevState)
  • componentDidUpdate()

• 卸載

  • componentWillUnmount()

其中這些方法即將過期，應該避免使用他們

• UNSAFE_componentWillMount()
• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

具體的流程圖以下:

地址是這個：https://projects.wojtekmaj.pl...

static getDerivedStateFromProps(props, state)

這是個新生命週期方法，須要注意三點：

• 第一個重點是最特別的一點：getDerivedStateFromProps 是一個靜態方法。靜態方法不依賴組件實例而存在，所以你在這個方法內部是訪問不到 this 的。若你偏要嘗試這樣作，一定報錯。
• 該方法能夠接收兩個參數：props 和 state，它們分別表明當前組件接收到的來自父組件的 props 和 當前組件自身的 state。
• getDerivedStateFromProps 須要一個對象格式的返回值。且返回值是不可或缺的，由於 React 須要用這個返回值來更新（派生）組件的 state。所以當你確實不存在「使用 props 派生 state 」這個需求的時候，最好是直接省略掉這個生命週期方法的編寫，不然必定記得給它 return 一個 null。

注意，getDerivedStateFromProps 方法對 state 的更新動做並不是「覆蓋」式的更新，而是針對某個屬性的定向更新。
好比，在getDerivedStateFromProps方法裏返回：

{num: props.text}

只會更新state的num屬性，並不會覆蓋生個state。

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate 的返回值會做爲第三個參數給到 componentDidUpdate。它的執行時機是在 render 方法以後，真實 DOM 更新以前。在這個階段裏，咱們能夠同時獲取到更新前的真實 DOM 和更新先後的 state&props 信息。從生命週期圖中能夠看到，getSnapshotBeforeUpdate執行後纔會真正更新DOM，也就是說在若是在這個方法獲取DOM，拿到的DOM仍是未更新的舊的DOM。

componentDidUpdate(prevProps, prevState, valueFromSnapshot)，第三個參數就是getSnapshotBeforeUpdate的返回值。getSnapshotBeforeUpdate 要想發揮做用，離不開 componentDidUpdate 的配合。

組件銷燬的常見緣由有如下兩個

• 組件在父組件中被移除了：這種狀況相對比較直觀，對應的就是咱們上圖描述的這個過程。
• 組件中設置了 key 屬性，父組件在 render 的過程當中，發現 key 值和上一次不一致，那麼這個組件就會被幹掉。

新生命週期背後的思考

在 Fiber 機制下，render 階段是容許暫停、終止和重啓的。當一個任務執行到一半被打斷後，下一次渲染線程搶回主動權時，這個任務被重啓的形式是「重複執行一遍整個任務」而非「接着上次執行到的那行代碼往下走」。這就致使 render 階段的生命週期都是有可能被重複執行的。

帶着這個結論，咱們再來看看 React 16 打算廢棄的是哪些生命週期：

• componentWillMount；
• componentWillUpdate；
• componentWillReceiveProps。

這些生命週期的共性，就是它們都處於 render 階段，均可能重複被執行，並且因爲這些 API 常年被濫用，它們在重複執行的過程當中都存在着不可小覷的風險。

官方文檔對React.Component中的生命週期的講解

官方文檔關於需不須要使用派生state,getDerivedStateFromProps方法相關的講解