React的生命週期和Vue的生命週期很多的相似部分，可以說是大致的結構都是類似的，下面我們先看看React中常用的生命週期圖

　　

1.constructor() 元件掛載之前呼叫的建構函式

　　1）元件不需要為state賦予初始值或者不需要繫結事件的情況下不需要為元件新增建構函式或者不需要使用props中的值

　　2）constructor（）方法的基本使用

 constructor(props){
    super(props)
    //不要再此處呼叫setState方法
    this.state={
      count:1
    }
    handClick=()=>{
      this.setState({
        count:this.state.count++
      })
    }

  }

2.render() 元件中唯一必須實現的方法

　　1）render函式應該保持是一個純函式，在state不變的情況下，每次輸出相同，render函式保持純函式的好處是程式碼可讀性更好

　　2）如需與瀏覽器進行互動請在componentDidMount()中進行或者在其他生命週期函式中實現

3.componentDidMount() 元件掛載後（插入DOM樹中呼叫）

　　1）如需進行網路請求這裡是個很好的時機

　　2）此時適合新增訂閱，新增完成訂閱，記得在componentWillUnmount()取消訂閱（此函式會在元件摧毀之前呼叫）

　　3）可以在此呼叫setState()函式，state中的狀態改變元件會再次render()，但會發生在螢幕變化之前，使用者感覺不到兩次render，但會存在效能問題，應在constructor中進行state初始化，但是頁面的渲染依賴於後臺請求的資料，你可以在這裡處理

4.componentDidUpdate()更新之後執行的函式，首次渲染不會執行

　　1）元件更新之後可以在此進行DOM操作

　　2）在此呼叫setState函式必須加判斷條件，不然會出現死迴圈

5.componentWillUnMount() 會在元件摧毀之前呼叫

　　1）清除 timer，取消網路請求或清除在 componentDidMount() 中建立的訂閱等

6.setState()雖然不是生命週期函式，但是它卻在生命週期函式中有這很大的作用，所以我在這裡一起介紹setState()函式

　　1）setState函式在react中不是立即執行的，react會收集多次的setState一起執行，所以避免在設定setState之後立即使用state中的值，在這裡react給出的兩個解決方案是：

　　　　setState函式新增一個回撥函式和在componentDidUpdate()中執行之後的操作，官方更推薦在componentDidUpdate中執行

7.forceUpDate()

　　1)元件在state和props變化時預設會重新渲染，但是如果render()依賴於其他資料我們可以呼叫forceUpDate強制渲染

　　2）呼叫 forceUpdate() 將致使元件呼叫 render() 方法，此操作會跳過該元件的 shouldComponentUpdate()。但其子元件會觸發正常的生命週期方法，包括 shouldComponentUpdate() 方法。如果標記發生變化，React 仍將只更新 DOM

　　3）通常你應該避免使用 forceUpdate()，儘量在 render() 中使用 this.props 和 this.state