首先看一張生命週期圖

constructor
是ES6對類的預設方法，通過 new 命令生成物件例項時自動呼叫該方法。並且，該方法是類中必須有的，如果沒有顯示定義，則會預設新增空的constructor( )方法。當存在constructor的時候⚠️必須手動呼叫super方法。
在constructor中如果要訪問this.props需要傳入props，示例如下：

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: this
 
.props.List
        };
    }
}

componentWillMount() 元件掛載之前
在元件掛載之前呼叫且全域性只調用一次。如果在這個鉤子裡可以setState，render後可以看到更新後的state，不會觸發重複渲染。該生命週期可以發起非同步請求，並setState。（React v16.3後廢棄該生命週期，可以在constructor中完成設定state）

render() 渲染元件
render是一個React元件必須定義的生命週期，用來渲染dom。⚠️不要在render裡面修改state，會觸發死迴圈導致棧溢位。render必須返回reactDom

componentDidMount() 元件掛載完成後
在元件掛載完成後呼叫，且全域性只調用一次。可以在這裡使用refs，獲取真實dom元素。該鉤子內也可以發起非同步請求，並在非同步請求中可以進行setState。

componentWillReceiveProps (nextProps ) props即將變化之前
props發生變化以及父元件重新渲染時都會觸發該生命週期，在該鉤子內可以通過引數nextProps獲取變化後的props引數，通過this.props訪問之前的props。該生命週期內可以進行setState。(React v16.3後廢棄該生命週期，可以用新的週期 static getDerivedStateFromProps 代替)

shouldComponentUpdate(nextProps, nextState) 是否重新渲染
元件掛載之後，每次呼叫setState後都會呼叫shouldComponentUpdate判斷是否需要重新渲染元件。預設返回true，需要重新render。返回false則不觸發渲染。在比較複雜的應用裡，有一些資料的改變並不影響介面展示，可以在這裡做判斷，優化渲染效率

componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者呼叫forceUpdate之後，componentWillUpdate會被呼叫。不能在該鉤子中setState，會觸發重複迴圈。(React v16.3後廢棄該生命週期，可以用新的週期 getSnapshotBeforeUpdate )

componentDidUpdate() 完成元件渲染
除了首次render之後呼叫componentDidMount，其它render結束之後都是呼叫componentDidUpdate。該鉤子內setState有可能會觸發重複渲染，需要自行判斷，否則會進入死迴圈。

componentWillUnmount() 元件即將被解除安裝
元件被解除安裝的時候呼叫。一般在componentDidMount裡面註冊的事件需要在這裡刪除。

React v16.3 新加入的生命週期 （轉載）
react v16.3刪掉以下三個生命週期
componentWillMount
componentWillReceiveProps
componentWillUpdate
新增兩個生命週期
static getDerivedStateFromProps
getSnapshotBeforeUpdate
static getDerivedStateFromProps
觸發時間：在元件構建之後(虛擬dom之後，實際dom掛載之前) ，以及每次獲取新的props之後。
每次接收新的props之後都會返回一個物件作為新的state，返回null則說明不需要更新state.
配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 沒錯，這是一個static
  }
}

getSnapshotBeforeUpdate
觸發時間: update發生的時候，在render之後，在元件dom渲染之前。
返回一個值，作為componentDidUpdate的第三個引數。
配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法。

class Example extends React.Component {
    getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
    }
}