react生命週期

react生命週期，一直只關心本身經常使用的那幾個，雖然基本能解決99%的問題，可是當被問到的時候，說的不清不楚仍是讓我很慚愧，因此今天我就專門來梳理一下react的生命週期

一、componentWillMount()

• 執行場景：render()執行以前
• 詳細： setState()不會觸發re-render重複渲染，只執行一次

二、render()

• 執行場景： componentWillMount() 以後/ componentWillReceive(nextProps, nextState)以後
• 詳情： 只能經過this.props,this.state訪問數據不能修改、 能夠反回null，false 或則任何React組件、
  不能改變組件狀態、 不能修改Dom的輸出
• 注意：render
  方法反回的不是真實的Dom元素，而是一個虛擬的表現，相似於一個Dom-Tree的結構對象，react之因此效率高就是這個緣由

三、componentDidMount()

• 執行場景：render()之後當即執行
• 詳情：能夠對Dom進行操做 一般在這裏加載服務器數據 能夠setState觸發從新渲染 只執行一次

四、componentWillReceiveProps(nextProps)

• 執行場景：在已經掛載的組件接收到新的props時觸發，能夠理解爲除了第一次生命週期（componentWillMount ->
  render -> componentDidMount）以後的生命週期觸發
• 詳情： 只有當從外部傳入的props發生變化時纔會觸發，setState是不會觸發的
• 注意：
  因爲組件可能會在props傳入即便沒有發生改變也會觸發從新渲染，因此若是你想本身處理改變最好對當前props值和下一次值進行比較，避免觸發沒必要要的渲染

五、shouldComponentUpdate(nextProps,nextState)

• 執行場景：在接收新的props或者state時觸發
• 詳情：這個函數的做用是爲了讓咱們本身可以控制組件是否從新渲染從而優化組件，默認返回true表示須要從新渲染
• 注意：首次渲染時不會觸發， 函數若是返回false是不會觸發從新渲染的（componentWillUpdata -> render -> componentDidUpdate）是不會被觸發的

六、componentWillUpdate(nextProps, nextState)

• 執行場景： props或state發生改變時，shouldComponentUpdata 返回true時觸發
• 注意：不能夠在這裏調用setState 若是須要響應props能夠到componentWillReceiveProps()中作響應

七、componentDidUpdate(prevProps, prevState)

• 執行場景： 在componentWillUpdate -> render 之後
• 注意： 該方法能夠操做Dom，可是組件初始時不會調用

八、componentWillUnmount()

• 執行場景：在組件卸載或銷燬以前調用
• 詳情： 這個方法主要用於一些清理工做，好比無效的timers, interval, 或則取消網絡請求 清理任何componentWillMount()中建立的Dom元素。