組件的生命周期方法分以下三個階段。
Mounting
當創建組件的實例并將其插入到DOM中時，將調用這些方法：
constructor()
componentWillMount()
render()
componentDidMount()
Updating
更新可能是props或state的改變引起的。 當重新渲染組件時，將調用這些方法：
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Unmounting
當組件從dom中移除時調用:
componentWillUnmount()
找來一張圖：
以下詳細講解下每個方法（翻譯來的）。
render()
render（）方法是必需的。調用時，應該檢查this.props和this.state并返回一個React元素。 例如<div />或您自己定義的另一個復合組件。
您也可以返回null或false表示您不希望任何呈現。 返回null或false時，ReactDOM.findDOMNode（this）將返回null。
render（）函數應該是純函數，這意味著它不會修改組件狀態，每次調用它都會返回相同的結果，并且它不會直接與瀏覽器交互。 如果需要與瀏覽器交互，請在componentDidMount（）或其他生命周期方法中執行工作。 保持render（）純粹使組件更容易思考。
如果shouldComponentUpdate()返回false，則不會調用render()。
constructor(props)
組件構造函數會在組件裝載到頁面之前調用。在實現React.Component子類的構造函數時，您應該在任何其他語句之前調用super（props）
。 否則，this.props將在構造函數中未定義，這可能會導致錯誤。
構造函數是初始化狀態的正確位置。 如果不初始化狀態并且不綁定方法，則不需要為您的React組件實現一個構造函數。
可以根據props來初始化狀態。 這是一個有效的React.Component子類構造函數的示例：
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}
小心這種模式，因為狀態不會隨著任何props更新而更新。 你通常不想將props同步到state，而是要提升狀態。如果您通過使用props更新狀態，您可能還需要實現componentWillReceiveProps（nextProps）來保持狀態與其最新狀態。 但是提升狀態往往比較容易，而且不容易出錯。
componentWillMount()
在元素裝載發生之前會調用componentWillMount（）。
避免在此方法中引入任何副作用或訂閱。
它在render（）之前被調用，因此在該方法中同步設置狀態不會觸發重新呈現。 這是在服務器渲染上調用的唯一生命周期鉤子。 一般來說，建議使用constructor（）。
componentDidMount()
在元素裝載發生之后會調用componentDidMount（）。
DOM節點的初始化應該在這里。 如果需要從遠程端點加載數據，這是實例化網絡請求的好地方。 此方法中的設置狀態將觸發重新渲染。
componentWillReceiveProps(nextProps)
當組件接收到一個新的props時該方法觸發. 如果需要更新狀態以響應更改（例如，要重置它），則可以比較this.props和nextProps，并使用此方法中的this.setState（）執行狀態轉換。
請注意，即使props沒有改變，React也可以調用此方法，因此如果只想處理更改，請確保比較當前值和下一個值。 當父組件使您的組件重新呈現時，可能會發生這種情況。
在裝載過程中，React不會使用初始props調用componentWillReceiveProps。 只會在某些組件的props更新時才會調用此方法。 調用this.setState通常不會觸發componentWillReceiveProps。
shouldComponentUpdate(nextProps, nextState)
使用shouldComponentUpdate（）讓React知道組件的輸出是否不受當前state或props的更改的影響。默認行為是在每個狀態更改時重新呈現，而在絕大多數情況下，您應該依賴于默認行為。
在接收到新的props或state時，將在渲染之前調用shouldComponentUpdate（）。默認為true。
對于初始渲染，或者當使用forceUpdate（）時，不調用此方法。
返回false不會阻止子組件在狀態更改時重新渲染。
目前，如果shouldComponentUpdate（）返回false，那么將不會調用componentWillUpdate（），render（）和componentDidUpdate（）。請注意，在將來，React可以將shouldComponentUpdate（）作為一個提示而不是一個strict指令，并返回false仍然可能導致組件的重新呈現。
如果在分析后確定特定組件較慢，則可以將其更改為繼承自實現shouldComponentUpdate（）的React.PureComponent
，對props和state進行淺比較。如果您有信心要手動編寫，可以將this.props與nextProps和this.state與nextState進行比較，并返回false以告知React可以跳過更新。
componentWillUpdate(nextProps, nextState)
會在render之前觸發，一個新的props和state會被做為參數傳進來 。使用此作為在更新發生之前進行準備的機會。 初始化渲染不會調用此方法。
請注意，您不能在此處調用this.setState（）。 如果需要更新狀態以響應更改，請改用componentWillReceiveProps（）。
如果shouldComponentUpdate（）返回false，則不會調用componentWillUpdate（）。
componentDidUpdate(prevProps, prevState)
會在更新發生后立即執行. 初始化渲染不會調用此方法。
當組件更新時，使用它作為在DOM上操作的機會。 只要您將當前props與以前的props進行比較。
這也是網絡請求的好地方（如果props沒有改變，則網絡請求可能不是必需的）。
componentWillUnmount()
在組件被卸載并銷毀之前，會立即調用此方法。 在此方法中執行任何必要的清理，例如使定時器無效，取消網絡請求或清除DOM元素
（在componentDidMount中創建的任何DOM元素）。
setState(updater, [callback])
setState（）將對組件狀態的更改插入隊列，并告訴React，該組件及其子組件需要更新狀態重新呈現。這是用于更新用戶界面以響應事件處理程序和服務器響應的主要方法。
將setState（）作為請求而不是立即命令來更新組件。為了更好的感知性能，React可能會延遲它，然后在單次通過中更新多個組件。 React不能保證立即應用狀態更改。
setState（）并不總是立即更新組件。它可能會批量或延遲更新直。這使得在調用setState（）之后立即讀取this.state是一個潛在的陷阱。最好的方法是使用componentDidUpdate或setState回調（setState（updater，callback）），其中的任何一個都會在應用更新后都被觸發。
setState（）將永遠導致重新渲染，除非shouldComponentUpdate（）返回false。
第一個參數是具有簽名的更新功能：
（prevState，props）=> stateChange
prevState是對以前狀態的引用。不應該直接突變。相反，應該根據prevState和props的輸入構建一個新對象來表示更改。例如，假設我們想通過props.step來增加狀態值：
this.setState（（prevState，props）=> {
return {counter：prevState.counter + props.step};
}）;
updater功能接收到的prevState和props都保證是最新的。更新器的輸出與prevState進行了淺層合并。
setState（）的第二個參數是一個可選的回調函數，它將在setState完成并且重新呈現該組件后執行。通常我們建議使用componentDidUpdate（）作為這樣的邏輯。
您可以選擇將一個對象作為第一個參數傳遞給setState（）而不是一個函數：
setState（stateChange，[callback]）
這將執行stateChange的淺合并到新的狀態，例如調整購物車商品數量：
this.setState（{quantity：2}）
這種形式的setState（）也是異步的，同一周期中的多個調用可以被批處理在一起。例如，如果您嘗試在同一周期內多次增加項目數量，則會導致相當于：
Object.assign（
previousState，
{quantity：state.quantity + 1}，
{quantity：state.quantity + 1}，
...
）
后續呼叫將覆蓋同一周期中先前呼叫的值，因此數量只會增加一次。如果下一個狀態取決于以前的狀態，我們建議使用updater函數形式：
this.setState（（prevState）=> {
return {counter：prevState.quantity + 1};
}）;
forceUpdate (callback)
默認情況下，當您的組件的state或props更改時，您的組件將重新呈現。如果您的render（）方法依賴于某些其他數據，您可以通過調用forceUpdate（）來告訴React該組件需要重新呈現。
調用forceUpdate（）將導致在組件上調用render（），跳過shouldComponentUpdate（）。這將觸發子組件的正常生命周期方法，包括每個子組件的shouldComponentUpdate（）方法。如果標記更改，則React仍將僅更新DOM。
通常你應該盡量避免使用forceUpdate（），只能從render.（）中的this.props和this.state讀取。
