生命週期的重要性，對於學習框架的重要性，就不多說了，下面主要講一下react的生命週期中的這些鉤子函式的基本用法。

話不多說，先上圖：

react元件的構造

import React,{ Component } from 'react';//因為編譯時要用到React，所以必須要引入

    class Demo extends Component {
      constructor(props,context) {
      super(props,context)//有constructor必須要supper,防止this報錯
      this.state = {
          //定義元件的狀態state
      }
    }
    componentWillMount () {
    }
    componentDidMount () {
    }
    componentWillReceiveProps (nextProps) {
    }
    shouldComponentUpdate (nextProps,nextState) {//必須要有返回值
    }
    componentWillUpdate (nextProps,nextState) {
    }
    componentDidUpdate (prevProps,prevState) {
    }
    render () {
    return (//最好加上()防止編譯時遇到;自動插入的bug
        <div></div>
    )
    }
    componentWillUnmount () {
    }
}
export default Demo;
 

初始化（掛載）階段

1.constructor(props,context)

接受父元件傳過來的屬性，並且可以初始化自己的state，構造器寫了就要supper，防止this指向錯誤。

拓展：（在ES6的類中，每一個類都有一個contructor（構造器）,當子類去繼承父類的時候，父類的constructor需要執行一下，為子類去繼承constructor中的一些東西，如果子類自己沒有寫constructor，預設的會生成一個constructor並且在其中就會執行弗雷的constructor，執行的方法就是super(),因為子類中的super就是父類的constructor

如果子類自己編寫了constructor，那麼就需要子類自己去super一次, 否則，子類的this將不被初始化，此時，子類的constructor就可以接收到外界傳入的props，但是this上訪問不到props，如果在constructor中需要使用到this.props，那麼就必須在super中傳入props，父類構造器就會為子類的this上掛載props）

2.componentWillMount() 

元件將要掛載

1. 元件剛剛經過了constructor，資料的初始化完成
2. 元件沒有render，dom還沒有渲染

3.render()

插入jxs構成的dom結構（React會生成虛擬dom，然後利用diff演算法進行對比，然後將改變的dom進行渲染嗎，提高效能），render 函式並不做實際的渲染動作，它只是返回一個JSX描述的結構，最終由React來操作渲染過程，React會渲染render函式return的東西，如果return false  或者 null，就等於告訴React，不渲染任何東西。

4.componentDidMount()

元件已經渲染完成，dom節點生成，元件的資料來源，通常是通過 Ajax 請求從伺服器獲取，可以使用 componentDidMount 方法設定 Ajax 請求，等到請求成功，再用 this.setState 方法重新渲染 UI，至此，初始化階段完成

更新（執行中）階段

1.componentWillReceiveProps(nextprops)

當前元件接受父元件的改變，重新經渲染元件時，接收一個nextprops（對比this.props和nextprops，然後setState當前元件的state，然後進行元件的重新渲染）引數。（nextprops為最新的props）

2.shouldComponentUpdate()

當元件state改變和componentWillReceiveProps(nextprops)後執行，react唯一用於元件重新渲染的生命週期（react中，當父元件的重新渲染會引起子元件的重新渲染，可以在該生命週期中進行判斷，如return false  以阻止元件的更新，提高效能）。該生命週期一旦寫在程式碼中，必須返回布林值，return true或者false，程式碼才會繼續執行，否則會報warning。

3.componentWillUpdate（）

元件將要重新渲染

4.render（）

（上文已將講過）

5.componentDidUpdate(prevprops,prevstate)

元件更新完成後進入該生命週期，類似於初始化階段的componentDidMount（componentDidMount只會在第一次初始化完成後進入），引數中prevprops和prevsstate為元件更新前的props和state。

銷燬（解除安裝）階段

componentWillUnmount()

解除元件中的事件繫結（如onscroll），和一些定時器函式（如setTimeout和setInterval），和vue的銷燬階段類似。

小結：學習過react後，你會感受到react的靈活性，可以和vue對比學習，關於vue的生命週期，可參考我的另一篇部落格

https://blog.csdn.net/qq_38045106/article/details/83717141