裝載過程：

Constructor:
初始化state；
綁定成員函數(shù)的this環(huán)境（bind、：： ）防止以解構(gòu)的方式進(jìn)行全局作用域進(jìn)行調(diào)用；
例：this.fn=this.fn.bind(this)或this.fn=::this.fn

GetInitialState：初始化state值,必須結(jié)合React.createClass()使用，使用es6的方式，此函數(shù)無效果；

  getInitialState:function(){
    return {
      name:"zhangsan"
    }
  },
    
  getDefaultProps:function(){
    return {
      name:"zhangsan" //這里的zhangsan相當(dāng)于默認(rèn)值
    }
  }
})

GetDefaultProps：初始化props值,必須結(jié)合React.createClass()使用，使用es6的方式，此函數(shù)無效果，用屬性defaultProps代替；

  constructor(props){
super(props)
this.state={data:new Date()}
  }
  render(){
    return (
      <ul>
        <li><ClickCount name="third" num={7}></ClickCount></li>
      </ul>
    )
  }
}

Test.defaultProps={
    name:"moren"
  }

ComponentWillMount：在render函數(shù)調(diào)用之前進(jìn)行調(diào)用；

Render：并不做實際的渲染動作，只返回一個jsx描述結(jié)構(gòu)，最后渲染與否由react來決定；必須是個純函數(shù)，不能設(shè)計到數(shù)據(jù)的更變（this.setState）；

    return (
      <ul>
        <li><ClickCount name="third" num={7}></ClickCount></li>
      </ul>
    )
  }

ComponentDidMount ：在render函數(shù)調(diào)用之后進(jìn)行調(diào)用；但不是在render函數(shù)調(diào)用之后立即調(diào)用，而是當(dāng)所有的dom樹掛載并渲染完成后才會調(diào)用，這是因為render函數(shù)并不進(jìn)行渲染，而只是返回一個jsx對象，渲染的工作由react庫進(jìn)行，只有當(dāng)所有的組件的jsx對象組合完畢之后，react通過對比后才會渲染，所有此鉤子函數(shù)是發(fā)生的所有組件的render函數(shù)都執(zhí)行后才會執(zhí)行；（只能在瀏覽器端觸發(fā)）
注：與angular中的link或者post函數(shù)有點相似，但是這里不僅指子組件，而是當(dāng)前組件中的所有組件，包括兄弟組件；提供了dom操作的接口

更新過程：

ComponentWillReceiveProps: （參數(shù)只有props）傳入的props的改變或者組件進(jìn)行刷新（forceUpdate函數(shù)觸發(fā)組件的刷新）都會觸發(fā)此函數(shù)，但是通過this.setState改變的數(shù)據(jù)則不會觸發(fā)此函數(shù)，

ShouldComponentUpdate：react組件的鉤子函數(shù)兩個需要有返回值的鉤子函數(shù)之一，另一個為render，此鉤子函數(shù)的返回值為一個bolen值，如果為true時，則prop的改變以及state的改變都會引起組件的刷新，如果為false時，則不再進(jìn)行渲染；此鉤子函數(shù)接受兩個參數(shù)，一個是nextProps，一個是nextState，可以將將要更新的值和此時的做對比，然后返回true和false來進(jìn)行性能的校優(yōu)；

ComponentWillUpdate：跟componentWillMount相似
Render
ComponentDidUpdate：跟componentDidMount相似

卸載過程：

ComponentWillUnmount:此鉤子函數(shù)可以在組件卸載前執(zhí)行，可以進(jìn)行手動添加dom元素的刪除，以及計時器和事件監(jiān)聽的移除；

使用方法：

  setNumber(){
        this.setState({
           count:this.state.count+1
        },()=>{
            this.componentWillUnmount()   //調(diào)用銷毀組件
        })
    }
//銷毀生命周期
  componentWillUnmount(){
      if(this.state.count>3){
                //將要銷毀的組件寫入 括號中
  ReactDOM.unmountComponentAtNode(document.getElementById('root'))
            }

    }
點擊button按鈕 （實現(xiàn)數(shù)字加一，如果大于3時數(shù)字銷毀組件）
 <button onClick={this.props.setNumber}>{this.props.count}</button>

1：construct 類似 Vue 中的 beforeCreated 和 Created；
操作:(1)數(shù)據(jù)的請求（2）當(dāng)前組件的檢測；

2：componentWillMount
介紹：類似Vue 中 beforemount ；在render函數(shù)調(diào)用之前進(jìn)行調(diào) 用；：

3：render 純函數(shù) ；
操作 (1)不能調(diào)用setstate進(jìn)行數(shù)據(jù)的改變，否則會陷入死循環(huán)
（2）不做數(shù)據(jù)的產(chǎn)生和保存，
（3）返回數(shù)據(jù)和Dom拼接好的jsx結(jié)構(gòu)
注：（1）因為數(shù)據(jù)更新后會觸發(fā)render周期 ,所以render中進(jìn)行數(shù)據(jù)改變會陷入死循環(huán)（2）必須有返回值return

4：ComponentDidMount
介紹：dom編譯完成，并渲染到真實dom中時調(diào)用
操作：(1)可以做dom的處理
（2）可以做具體的事件監(jiān)聽
（3）某些插件的實例化

5：componentWillReceiveProps
介紹：當(dāng)父組件給子組件的數(shù)據(jù)改變時觸發(fā)該函數(shù)
操作 （1）可以將props再次賦給state,也可以說是用來監(jiān)聽props改變

6：shouldComponentUpdate(props,state)
介紹：對于項目提高渲染性能時使用；
操作 （1）可以對props和state的值進(jìn)行對比 然后通過返回true和false 來控制是否更新組件；（在瀏覽器->more tools->rendering里勾選Paing flashing可以高亮頁面重繪的部分）
注：（1）必須有返回值 ture || false

7：componentWillUpdate
介紹 ：在render之前最后一次可以改變數(shù)據(jù)的地方
8：componentDidUpdate 同 componentWillMount

9：ComponentWillUnmount:
介紹 ：此鉤子函數(shù)可以在組件卸載前執(zhí)行，可以進(jìn)行手動添加dom元素的 刪除，以及計時器和事件監(jiān)聽的移除；
操作：（1）所有跟dom相關(guān)的操作，在組建銷毀之前一定要在這里做相應(yīng)的處理；否則會出錯
整個react的組件的生命周期可以分成幾種情況去執(zhí)行：
組件第一次渲染：
getDefaultProps -> getInitialState -> componentWillMount -> render -> componentDidMount

卸載組件：
componentWillUnmount

組件第二次渲染：
getInitialState -> componentWillMount -> render -> componentDidMount

組件props發(fā)生改變：
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

組件state發(fā)生改變(props并未改變)：
shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate