react生命週期分享，不管你是否看過！！！

1、基礎

先來介紹一個生命週期的定義：
1）componentWillMount(){}

// Mounting  安裝階段 
// 在客戶端和服務器上，在初始渲染髮生以前當即調用一次 若是在這個方法中調用setState，
// render（）將看到更新的狀態，而且只會執行一次，儘管狀態改變。

2)componentDidMount(){}

// Mounting  安裝階段 
// 調用一次，只在客戶端（不在服務器上），在初始渲染髮生後當即
// 子組件的componentDidMount（）方法在父組件的componentDidMount（）方法以前被調用
// setTimeout  setInterval   AJAX 在此之行，強烈建議

3)componentWillReceiveProps(nextProps){}

// Updating 更新階段
// 在組件接收新props時調用。初始渲染不調用此方法。
// 老的props能夠用this.props  新值就用nextProps查看
// 在此函數中調用this.setState（）不會觸發附加的渲染。

4)shouldComponentUpdate(nextProps, nextState){}

// Updating 更新階段
// 當正在接收新的道具或狀態時，在渲染以前調用。
// 此方法必須返回false or true 不然報錯  true則渲染，false則不渲染！在此聲明週期中能夠考慮是否須要進行渲染！避免沒必要要的性能浪費
// 若是shouldComponentUpdate返回false，那麼render（）將被徹底跳過，直到下一個狀態改變。此外，不會調用componentWillUpdate和componentDidUpdate。
// 默認返回true
// 若是性能是一個瓶頸，特別是有幾十個或幾百個組件，請使用shouldComponentUpdate來加快您的應用程序。
// return true or false

5) componentWillUpdate(nextProps, nextState){}

// Updating 更新階段
// 當正在接收新的props或state時當即調用。初始渲染不調用此方法
// 您不能在此方法中使用this.setState（）。若是您須要更新state以響應prop更改，請改用componentWillReceiveProps。

6)componentDidUpdate(nextProps, nextState){}

// Updating  更新階段
// 在組件的更新刷新到DOM後當即調用。初始渲染不調用此方法。
// 當組件已更新時，使用此操做做爲DOM操做的機會

7)componentWillUnmount(){}

// Unmounting  卸載階段
// 在組件從DOM卸載以前當即調用。
// 在此方法中執行任何須要的清理，例如使計時器無效或清除在componentDidMount中建立的任何DOM元素。clearInterval or destroy

2、生命週期的執行順序

舉例：只有一個組件，裏面有一個onClick事件改編一個state

刷新頁面：

a、componentWillMount--->    // 能夠更改state
            render()---->
                componentDidMount // 週期結束

觸發onClick事件：(前提只有事件中出發setState，其餘中沒有)

shouldComponentUpdate中 return true
    shouldComponentUpdate-->
            componentWillUpdate-->
                    render()-->
                            componentDidUpdate //週期結束
    
shouldComponentUpdate中 return false
            shouldComponentUpdate //週期結束

上面只是一個很簡單的例子講述了週期的執行順序，你們能夠根據順序去作相應的操做，固然在componentWillUpdate和componentDidUpdate這兩個週期中不可使用this.setState,須要使用此方法能夠在componentWillReceiveProps中去操做。週期中可能進行的操做在上面的定義中以解釋。

舉例：父、子組件，父組件和上述相同，字段件只是一個純ui組件沒有任何的操做,接受父組件傳來的props(父組件的click可控制props的內容)。

刷新頁面：

父componentWillMount--->父render()---->子componentWillMount--->子render()--->子componentDidMount--->父componentDidMount

觸發onClick事件:

子組件shouldComponentUpdate 返回的是false
    父shouldComponentUpdate-->父componentWillUpdate-->父render()-->父componentDidUpdate
子組件shouldComponentUpdate 返回的是true
    父shouldComponentUpdate-->父componentWillUpdate-->父render()--->子componentWillReceiveProps--->子shouldComponentUpdate--->子componentWillUpdate---->子render()--->子componentDidUpdate--->父componentDidUpdate

componentWillUnmount階段
當你的組件關閉的時候，例如跳轉頁面的時候，此週期執行一次。可能作的操做在上面的定義。

給出一段代碼：(就是上述的子組件)

import React, { Component } from 'react';

class Another extends Component {
    constructor(props) {
        super(props);
        this.state = {
            son:'子組件'
        }
    }
    componentWillMount() {
    console.log('子組件－－Mounting－componentWillMount',this.state.son)
  }
  componentDidMount() {
    console.log('子組件－－Mounting－componentDidMount',this.state.son)
  }
  componentWillReceiveProps(nextProps) {
    console.log('子組件－－Updating-componentWillReceiveProps')
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('子組件－－Updating-shouldComponentUpdate')
    return true
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('子組件－－Updating-componentWillUpdate')
  }
  componentDidUpdate(nextProps, nextState) {
    console.log('子組件－－Updating-componentDidUpdate')
  }
  componentWillUnmount() {
  }
    render() {
        return(
            <div>
                我是子組件－－我是子組件－－我是子組件{this.props.name}
            </div>
        )
    }
}


export default Another;

根據上面的代碼，說一個組件實例的初始化的方法過程

1）`getInitialState` 設置初始狀態值，(掉調用一次)，可以使用setState方法更改狀態

es6語法則在這是用：

constructor(props) {
        super(props);
        this.displayName='name';
        this.事件名=this.事件名.bind(this);//綁定事件的this,這樣初始化只綁定一次，若是在render中邦定，則只要render就邦定一次。
        this.state = {
            son:'子組件'
        }
    }
    static propTypes = { 
        value:PropTypes.string,
        //類型的種類object string array func number bool any
    }
    static defaultProps={ 
        value:'1'
    }

2)`getDefaultProps `設置初始props的值，不能夠更改
es6語法參照上面的 static defaultProps

3）`propTypes `驗證傳遞給組件的props
es6語法上述 static propTypes   

4）`displayName `用於degbug調試消息，若是不寫，JSX將從變量賦值中推斷出類的displayName，es6語法如上述代碼片斷中，例以下面

// Input (JSX):
var Nav = React.createClass({ });
// Output (JS):
var Nav = React.createClass({displayName: "Nav", });

執行的順序就是上述代碼片斷的順序！

3、總結

詳細瞭解生命週期的特性，有助於處理數據，更好的節約性能。本人一點點小的看法，還望各位路過的大神，賞臉批評指正！