React——組件的生命周期函數

每一個組件都有一些生命周期函數。

當組件實例被創建並且會插入到DOM中，下麵這些函數會被調用

constructor

componentWillMount

render

componentDidMount

改變組件的state或props會導致更新，當重新渲染組件時會調用下麵這些方法

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

當組件從DOM中移除，會調用下麵的方法

componentWillUnmount

一.render()

render方法是必須的，render的返回值是下麵的類型：
(1)react元素：要麼是自定義的組件要麼是原生的DOM組件
(2)字元串或者數字:會被渲染成DOM中的文本節點
(3)Portals:通過ReactDOM.createPortal創建
(4)null:什麼都不會渲染
(5)Boolean:什麼都不渲染
(6)包含多個元素的數組

render(){
    return [
        <li key='1'>1</li>,
        <li key='2'>2</li>
    ]
}

 render方法應該是簡單的，在render中不能修改組件的state，每一次調用render都會返回一個新的結果。並且在render中也不能與瀏覽器進行交互，如果需要與瀏覽器交互，就在componentDidMount或者其他生命周期函數中執行。

二.constructor(props)

react組件的構造函數在組件裝載之前調用。如果沒有顯示的定義constructor，那麼在實例化組件時會調用預設的constructor，如果在React.Component的子類中顯示的定義了constructor，那麼就要在constructor中最開始調用super(props).
在構造函數中實例化state是一個很好的選擇。下麵舉例一段代碼

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

 在react中使用props初始化state是合法的，但是這存在一個問題：當props被更新時，state並不會被更新。解決的方法是：在組件的componentWillReceiveProps(nextProps)中用新的props更新state。雖然這能解決問題，但是並不推薦，推薦把state提升到最近的公共父組件中

三.componentWillMount()

當裝載發生之前會立即調用componentWillMount,componentWillMount會在調用render之前被調用，所有在componentWillMount中修改state，不會導致組件的重新渲染。伺服器端渲染才會調用這個方法，所有推薦通過constructor代替這個方法。

四.componentDidMount()

當組件被裝載完成會立即觸發componentDidMount，在這個函數中修改state被導致組件重新渲染。組件被裝載之後才能操作DOM。如果你需要載入遠程數據，在這個地方發送網路請求是個不錯的主意.

五.componentWillReceiveProps(nextProps)

當已經被轉載的組件接受新的props之前componentWillReceiveProps會被觸發。如果你需要更新state去響應props的更新，可以在這裡通過setState方法更新state。當組件首次接受到props，這個方法不會被調用.
註意：props沒有被改變也可能會調用這個方法，所有在這個方法中將當前的props去next props進行比較是很有必要的。

六.shouldComponentUpdate(nextState,nextProps)

當新的props或state被接受，在渲染之前會調用shouldComponentUpdate，這個方法預設是返回true，初次渲染和使用forceUpdate，不會調用這個方法。如果shouldComponentUpdate返回false,之後的componentWillUpdate,render以及componentDidMount不會被調用,組件以及他的子組件不會被重新渲染。

七.componentWillUpdate(nextProps, nextState)

當接受到新的props或state，在重新渲染之前會立即調用這個方法。在這個方法中不能this.setState()，初次渲染不會調用這個方法

八.componentDidUpdate(prevProps, prevState)

當更新完成之後會立即調用這個方法，初次渲染不會調用這個方法。當組件被更新之後可以在這裡操作DOM，當你發現現在的props與之前的props不一樣，在這裡發送網路請求是個不錯的主意

九.componentWillUnmount()

組件被摧毀之前會立即調用這個方法，在這個方法中可以做一些必要的清理