React創建組件的過程中，會調用一個render方法，以及觸發若干生命周期的方法。本文主要和大家講一講這些生命周期的方法是何時被執行的。理解組件的生命周期，當組件被創建或銷毀時，可以執行某些操作。此外，當 props 和 state 發生改變的時候，你可以利用這些生命周期的鉤子來改變你的組件。
生命周期
為了清楚的了解生命周期，我們需要明白 組件初始化 ，state 改變 ， props 改變 ， 組件卸載 ，以及調用 forceUpdate() 時，哪些鉤子函數會被執行。
組件初始化
constructor()
React組件的構造函數將會在裝配之前被調用。當為一個React.Component子類定義構造函數時，你應該在任何其他的表達式之前調用super(props)。否則，this.props在構造函數中將是未定義。
構造函數是初始化狀態的合適位置。若你不初始化狀態且不綁定方法，那你也不需要為你的React組件定義一個構造函數。
可以基于屬性來初始化狀態。這樣有效地“分離（forks）”屬性并根據初始屬性設置狀態。這有一個有效的React.Component子類構造函數的例子：
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}componentWillMount()
componentWillMount()
componentWillMount()在裝配發生前被立刻調用。其在render()之前被調用，因此在這方法里同步地設置狀態將不會觸發重渲。避免在該方法中引入任何的副作用或訂閱。
這是唯一的會在服務端渲染調起的生命周期鉤子函數。通常地，我們推薦使用constructor()來替代。
render()
render()方法是必須的。
當被調用時，其應該檢查this.props 和 this.state并返回以下類型中的一個:
React元素。 通常是由 JSX 創建。該元素可能是一個原生DOM組件的表示，如<p />，或者是一個你定義的合成組件。
字符串和數字。 這些將被渲染為 DOM 中的 text node。
Portals。 由 ReactDOM.createPortal 創建。
null。 什么都不渲染。
布爾值。 什么都不渲染。（通常存在于 return test && <Child />寫法，其中 test 是布爾值。）
當返回null 或 false時，ReactDOM.findDOMNode(this) 將返回 null。render()函數應該純凈，意味著其不應該改變組件的狀態，其每次調用都應返回相同的結果，同時不直接和瀏覽器交互。若需要和瀏覽器交互，將任務放在componentDidMount()階段或其他的生命周期方法。保持render() 方法純凈使得組件更容易思考。
注意
若shouldComponentUpdate()返回false，render()函數將不會被調用。
componentDidMount()
componentDidMount()
componentDidMount()在組件被裝配后立即調用。初始化使得DOM節點應該進行到這里。若你需要從遠端加載數據，這是一個適合實現網絡請求的地方。在該方法里設置狀態將會觸發重渲。
State Changes
shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)
使用shouldComponentUpdate()以讓React知道當前狀態或屬性的改變是否不影響組件的輸出。默認行為是在每一次狀態的改變重渲，在大部分情況下你應該依賴于默認行為。
當接收到新屬性或狀態時，shouldComponentUpdate()在渲染前被調用。默認為true。該方法并不會在初始化渲染或當使用forceUpdate()時被調用。
當他們狀態改變時，返回false 并不能阻止子組件重渲。
注意：如果只定義方法，不寫任何返回值，會提示：shouldComponentUpdate(): Returned undefined instead of a boolean value.注意即使屬性未有任何改變，React可能也會調用該方法，因此若你想要處理改變，請確保比較當前和之后的值。這可能會發生在當父組件引起你的組件重渲。
在裝配期間，React并不會調用帶有初始屬性的componentWillReceiveProps方法。其僅會調用該方法如果某些組件的屬性可能更新。調用this.setState通常不會觸發componentWillReceiveProps。
componentWillUpdate()
componentWillUpdate(nextProps, nextState)
當接收到新屬性或狀態時，componentWillUpdate()為在渲染前被立即調用。在更新發生前，使用該方法是一次準備機會。該方法不會在初始化渲染時調用。
注意你不能在這調用this.setState()，若你需要更新狀態響應屬性的調整，使用componentWillReceiveProps()代替。
注意：若shouldComponentUpdate()返回false，componentWillUpdate()將不會被調用。
componentDidUpdate()
componentDidUpdate(nextProps, nextState)
當接收到新屬性或狀態時，componentWillUpdate()為在渲染前被立即調用。在更新發生前，使用該方法是一次準備機會。該方法不會在初始化渲染時調用。
注意：你不能在這調用this.setState()，若你需要更新狀態響應屬性的調整，使用componentWillReceiveProps()代替。注意：若
shouldComponentUpdate()返回false，componentWillUpdate()將不會被調用。
Props Changes
componentWillReceiveProps()
componentWillReceiveProps(nextProps)
componentWillReceiveProps()在裝配了的組件接收到新屬性前調用。若你需要更新狀態響應屬性改變（例如，重置它），你可能需對比this.props和nextProps并在該方法中使用this.setState()處理狀態改變。
注意：即使屬性未有任何改變，React可能也會調用該方法，因此若你想要處理改變，請確保比較當前和之后的值。這可能會發生在當父組件引起你的組件重渲。在裝配期間，React并不會調用帶有初始屬性的componentWillReceiveProps方法。其僅會調用該方法如果某些組件的屬性可能更新。調用this.setState通常不會觸發componentWillReceiveProps。
Unmounting
componentWillUnmount()
componentWillUnmount()
componentWillUnmount() 在組件被卸載和銷毀之前立刻調用。可以在該方法里處理任何必要的清理工作，例如解綁定時器，取消網絡請求，清理任何在componentDidMount環節創建的DOM元素。
forceUpdate
默認情況，當你的組件或狀態發生改變，你的組件將會重渲。若你的render()方法依賴其他數據，你可以通過調用forceUpdate()來告訴React組件需要重渲。
調用forceUpdate()將會導致組件的 render()方法被調用，并忽略shouldComponentUpdate()。這將會觸發每一個子組件的生命周期方法，涵蓋，每個子組件的shouldComponentUpdate() 方法。若當標簽改變，React僅會更新DOM。
通常你應該嘗試避免所有forceUpdate() 的用法并僅在render()函數里從this.props和this.state讀取數據。
forceUpdate() Example
// forceUpdate() Example
class App extends React.Component{
constructor(){
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};
componentWillUpdate() {
console.info('componentWillUpdate called');
}
componentDidUpdate() {
console.info('componentDidUpdate called');
}
forceUpdateHandler(){
this.forceUpdate();
};
render(){
return(
<p>
<button onClick= {this.forceUpdateHandler} >FORCE UPDATE</button>
<h4>Random Number : { Math.random() }</h4>
</p>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));相關推薦：
React組件Dragact 0.1.4詳解
React組件生命周期實例分析
React組件的生命周期函數是什么
以上就是React組件生命周期詳解的詳細內容，更多請關注php中文網其它相關文章！