摘要：此方法必須返回否則報(bào)錯(cuò)則渲染，則不渲染在此聲明周期中可以考慮是否需要進(jìn)行渲染避免不必要的性能浪費(fèi)如果返回，那么將被完全跳過，直到下一個(gè)狀態(tài)改變。

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

// Mounting  安裝階段 
// 在客戶端和服務(wù)器上，在初始渲染發(fā)生之前立即調(diào)用一次 如果在這個(gè)方法中調(diào)用setState，
// render（）將看到更新的狀態(tài)，并且只會(huì)執(zhí)行一次，盡管狀態(tài)改變。

2)componentDidMount(){}

// Mounting  安裝階段 
// 調(diào)用一次，只在客戶端（不在服務(wù)器上），在初始渲染發(fā)生后立即
// 子組件的componentDidMount（）方法在父組件的componentDidMount（）方法之前被調(diào)用
// setTimeout  setInterval   AJAX 在此之行，強(qiáng)烈建議

3)componentWillReceiveProps(nextProps){}

// Updating 更新階段
// 在組件接收新props時(shí)調(diào)用。初始渲染不調(diào)用此方法。
// 老的props可以用this.props  新值就用nextProps查看
// 在此函數(shù)中調(diào)用this.setState（）不會(huì)觸發(fā)附加的渲染。

4)shouldComponentUpdate(nextProps, nextState){}

// Updating 更新階段
// 當(dāng)正在接收新的道具或狀態(tài)時(shí)，在渲染之前調(diào)用。
// 此方法必須返回false or true 否則報(bào)錯(cuò)  true則渲染，false則不渲染！在此聲明周期中可以考慮是否需要進(jìn)行渲染！避免不必要的性能浪費(fèi)
// 如果shouldComponentUpdate返回false，那么render（）將被完全跳過，直到下一個(gè)狀態(tài)改變。此外，不會(huì)調(diào)用componentWillUpdate和componentDidUpdate。
// 默認(rèn)返回true
// 如果性能是一個(gè)瓶頸，特別是有幾十個(gè)或幾百個(gè)組件，請使用shouldComponentUpdate來加快您的應(yīng)用程序。
// return true or false

5) componentWillUpdate(nextProps, nextState){}

// Updating 更新階段
// 當(dāng)正在接收新的props或state時(shí)立即調(diào)用。初始渲染不調(diào)用此方法
// 您不能在此方法中使用this.setState（）。如果您需要更新state以響應(yīng)prop更改，請改用componentWillReceiveProps。

6)componentDidUpdate(nextProps, nextState){}

// Updating  更新階段
// 在組件的更新刷新到DOM后立即調(diào)用。初始渲染不調(diào)用此方法。
// 當(dāng)組件已更新時(shí)，使用此操作作為DOM操作的機(jī)會(huì)

7)componentWillUnmount(){}

// Unmounting  卸載階段
// 在組件從DOM卸載之前立即調(diào)用。
// 在此方法中執(zhí)行任何必要的清理，例如使計(jì)時(shí)器無效或清除在componentDidMount中創(chuàng)建的任何DOM元素。clearInterval or destroy 

舉例：只有一個(gè)組件，里面有一個(gè)onClick事件改編一個(gè)state

刷新頁面：

a、componentWillMount--->    // 可以更改state
            render()---->
                componentDidMount // 周期結(jié)束
                

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

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

上面只是一個(gè)很簡單的例子講述了周期的執(zhí)行順序，大家可以根據(jù)順序去做相應(yīng)的操作，當(dāng)然在componentWillUpdate和componentDidUpdate這兩個(gè)周期中不可以使用this.setState,需要使用此方法可以在componentWillReceiveProps中去操作。周期中可能進(jìn)行的操作在上面的定義中以解釋。

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

刷新頁面：

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

觸發(fā)onClick事件:

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

componentWillUnmount階段
當(dāng)你的組件關(guān)閉的時(shí)候，例如跳轉(zhuǎn)頁面的時(shí)候，此周期執(zhí)行一次?？赡茏龅牟僮髟谏厦娴亩x。

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

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(
            

                我是子組件－－我是子組件－－我是子組件{this.props.name}
            
        )
    }
}


export default Another;

根據(jù)上面的代碼，說一個(gè)組件實(shí)例的初始化的方法過程

1）`getInitialState` 設(shè)置初始狀態(tài)值，(掉調(diào)用一次)，可使用setState方法更改狀態(tài)

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 `設(shè)置初始props的值，不可以更改
es6語法參照上面的 static defaultProps

3）`propTypes `驗(yàn)證傳遞給組件的props
es6語法上述 static propTypes   

4）`displayName `用于degbug調(diào)試消息，如果不寫，JSX將從變量賦值中推斷出類的displayName，es6語法如上述代碼片段中，例如下面

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

執(zhí)行的順序就是上述代碼片段的順序！

三、總結(jié)

詳細(xì)了解生命周期的特性，有助于處理數(shù)據(jù)，更好的節(jié)約性能。本人一點(diǎn)點(diǎn)小的見解，還望各位路過的大神，賞臉批評指正！