react組件生命周期

前面的話

　　本文將詳細介紹react組件生命周期

概述

　　每一個組件都有幾個可以重寫以讓代碼在處理環節的特定時期運行的“生命周期方法”。方法中帶有首碼 will 的在特定環節之前被調用，而帶有首碼 did 的方法則會在特定環節之後被調用

【裝配】

　　這些方法會在組件實例被創建和插入DOM中時被調用：

constructor()
componentWillMount()
render()
componentDidMount()

【更新】

　　屬性或狀態的改變會觸發一次更新。當一個組件在被重渲時，這些方法將會被調用：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

【卸載】

　　當一個組件被從DOM中移除時，該方法被調用：

componentWillUnmount()

裝配過程

【render()】

　　render()函數應該純凈，意味著其不應該改變組件的狀態，其每次調用都應返回相同的結果，同時不直接和瀏覽器交互。若需要和瀏覽器交互，將任務放在componentDidMount()階段或其他的生命周期方法

【constructor(props)】

　　React組件的構造函數將會在裝配之前被調用。當為一個React.Component子類定義構造函數時，應該在任何其他的表達式之前調用super(props)。否則，this.props在構造函數中將是未定義，並可能引發異常

【componentWillMount()】

　　這是唯一的會在服務端渲染調起的生命周期鉤子函數。通常地，推薦使用constructor()來替代

【componentDidMount()】

　　componentDidMount()在組件被裝配後立即調用。初始化使得DOM節點應該進行到這裡。若需要從遠端載入數據，這是一個適合實現網路請求的地方。在該方法里設置狀態將會觸發重渲

更新及卸載

【componentWillReceiveProps(nextProps)】

　　componentWillReceiveProps()在裝配了的組件接收到新屬性前調用。若需要更新狀態響應屬性改變（例如，重置它），可能需對比this.props和nextProps併在該方法中使用this.setState()處理狀態改變

　　[註意]即使屬性未有任何改變，React可能也會調用該方法

【shouldComponentUpdate(nextProps, nextState)】

　　使用shouldComponentUpdate()可以讓React知道當前狀態或屬性的改變是否不影響組件的輸出。預設行為是在每一次狀態的改變重渲，在大部分情況下應該依賴於預設行為

　　當接收到新屬性或狀態時，shouldComponentUpdate() 在渲染前被調用。預設為true

　　若該方法返回false，則componentWillUpdate()、componentDidUpdate()、render()將不會被調用

　　[註意]該方法並不會在初始化渲染或當使用forceUpdate()時被調用

【componentWillUpdate(nextProps, nextState)】

　　當接收到新屬性或狀態時，componentWillUpdate()在渲染前被立即調用。在更新發生前，使用該方法是一次準備機會。該方法不會在初始化渲染時調用。

　　[註意]不能在這調用this.setState()，若需要更新狀態響應屬性的調整，使用componentWillReceiveProps()代替

【componentDidUpate(prevProps, prevState)】

　　componentDidUpdate()會在更新發生後立即被調用。該方法並不會在初始化渲染時調用。當組件被更新時，使用該方法是操作DOM的一次機會。這也是一個適合發送請求的地方

【componentWillUnmount()】

　　componentWillUnmount()在組件被卸載和銷毀之前立刻調用。可以在該方法里處理任何必要的清理工作，例如解綁定時器，取消網路請求，清理任何在componentDidMount環節創建的DOM元素

強制渲染

【component.forceUpdate(callback)】

　　預設情況，當組件或狀態發生改變，組件將會重渲。若render()方法依賴其他數據，可以通過調用forceUpdate()來告訴React組件需要重渲

　　調用forceUpdate()將會導致組件的 render()方法被調用，並忽略shouldComponentUpdate()。這將會觸發每一個子組件的生命周期方法，涵蓋每個子組件的shouldComponentUpdate() 方法。若當標簽改變，React僅會更新DOM

　　通常應該嘗試避免所有forceUpdate() 的用法並僅在render()函數里從this.props和this.state讀取數據