React生命周期圖解：

一、舊版圖解：

二、新版圖解：

從圖中，我們可以清楚知道React的生命周期分為三個部分: 實例化、存在期和銷毀時。

舊版生命周期如果要開啟async rendering，在render函數之前的所有函數，都有可能被執行多次。

舊版的React生命周期看圖就可以啦，我們就不詳細講解了，下面我們來詳細講下，V16.4React的生命周期。

由圖中可以看到，React生命周期新引入了兩個生命周期函數：getDerivedStateFromProps, getSnapShotBeforeUpdate。


getDerivedStateFromProps:

getDerivedStateFromProps無論是Mounting還是Updating，也無論是因為什麽引起的Updating，全部都會被調用。

getSnapshotBeforeUpdate：

getSnapshotBeforeUpdate()被調用於render之後，可以讀取但無法使用DOM的時候。它使您的組件可以在可能更改之前從DOM捕獲一些信息（例如滾動位置）。此生命周期返回的任何值都將作為參數傳遞給componentDidUpdate（）。

React官網中getSnapshotBeforeUpdate的例子：

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    
 
this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 我們是否要添加新的 items 到列表
    // 捕捉滾動位置，以便我們可以稍後調整滾動
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    
 
return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 如果我們有snapshot值, 我們已經添加了 新的items
    // 調整滾動以至於這些新的items 不會將舊items推出視圖
    // (這邊的snapshot是 getSnapshotBeforeUpdate方法的返回值)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

這篇文章對React生命周期的講解就到這裏啦，可以前往React官網深入學習。

React生命周期詳解