reactJS -- 8 組件生命週期

https://fraserxu.me/2014/08/31/react-component-lifecycle/

React入門教程 - 組件生命週期

每個陣營組件在加載時都有特定的生命週期，在此期間不一樣的方法會被執行。

組件加載：componentWillMount

componentWillMount()

componentWillMount在會組件render以前執行，而且永遠都只執行一次。

因爲這個方法始終只執行一次，若是因此這裏在定義了setState方法以後，頁面永遠都只會在加載前更新一次。

組件加載：componentDidMount

componentDidMount()

這個方法會在組件加載完畢以後當即執行。在這個時候以後組件已經生成了對應的DOM結構，經過能夠this.getDOMNode()來進行訪問。

若是你想和其餘的JavaScript框架一塊兒使用，能夠在這個方法中執行setTimeout，setInterval或者發送AJAX請求等操做（防止異部操做阻塞UI）。

componentDidMount: function() {
  setTimeout(function() {
    this.setState({items: {name: 'test'}})
  }, 1000)
}

組件更新：componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在組件接收到一個新的道具時被執行。這個方法在初始化渲染時不會被調用。

經過使用this.setState（）更新狀態調用render（）以前，將此做爲對prop轉換的反應的機會。（不太懂這句話...）

舊的道具經過能夠this.props來電子雜誌。這個在函數內調用this.setState()方法不會增長一次新的渲染。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

組件更新：shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

返回一個布爾值。在組件接收到新的道具或者狀態時被執行。初始化在時或者使用forceUpdate時不被執行。

能夠在你確認不須要更新組件時使用。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

若是shouldComponentUpdate返回false，render()則會在下一個狀態改變以前被徹底跳過（另外componentWillUpdate和componentDidUpdate也不會被執行）

狀況默認下shouldComponentUpdate會報道查看真實的。

默認狀況下，shouldComponentUpdate老是返回true，以防止在狀態變爲現實時的細微錯誤，可是若是您注意老是將狀態視爲不可變的，而且只能從render（）中的道具和狀態中讀取，那麼可使用一個實現來覆蓋shouldComponentUpdate比較舊的道具和狀態與他們的替代品（這句也不太懂...）

若是你須要考慮性能，特別是在有上百個組件時，使用能夠shouldComponentUpdate來提高應用速度。

組件更新：componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在組件接收到新的道具或者狀態但尚未渲染時被執行。在初始化時不會被執行。

通常用在組件發生更新以前。

組件更新：componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在組件完成更新後當即執行。在初始化時不會被執行。通常會在組件完成更新後被使用。例如清除通知文字等操做。

卸載：componentWillUnmount

在組件從DOM卸載後當即執行。

componentDidMount:function(){
    this.inc = setInterval(this.update,500)
},
componentWillUnmount:function(){
    console.log("goodbye cruel world!")
    clearInterval(this.inc)
}

主要用來執行一些必要的清理任務。清除例如setTimeout等函數，任意或者在的componentDidMount建立³³的DOM元素。