在React Native中使用組件來封裝界面模塊時，整個界面就是一個大的組件，開發過程就是不斷優化和拆分界面組件、構造整個組件樹的過程。
所以學習理解組件的生命周期顯得尤為重要！
一、組件的屬性(props)和狀態(state)
1. 屬性（props）
它是組件的不可變屬性（組件自己不可以自己修改props，只可由其他組件調用它時在外部改變）。
組件自身定義了一組props作為對外提供的接口，展示一個組件時只需要指定props作為節點的屬性。
一般組件很少需要對外公開方法（例外：工具類的靜態方法等），唯一的交互途徑就是props。所以說它也是父組件與子組件通信的橋梁。
組件自己不可以自己修改props（即：props可認為是只讀的），只可由其他組件調用它時在外部修改。
2. 狀態（state）
它是組件的內部狀態屬性，主要用來存儲組件自身需要的數據。
除了初始化時可能由props來決定，之后就完全由組件自身去維護。
組件中由系統定義了setState方法，每次調用setState時都會更新組件的狀態，觸發render方法重新渲染界面。
需要注意的是render方法是被異步調用的，這可以保證同步的多個setState方法只會觸發一次render，這樣做是有利于提高性能的。
二、組件的生命周期
對于自定義組件，除了必須實現的render方法，還有一些其他的可選方法可被調用。這些方法會在組件的不同時期之行，所以也可以說這些方法是組件的生命周期方法。
對于組件的生命周期來說一般分為四個階段，分別為：
創建階段、實例化階段、運行(更新)階段、銷毀階段。
1. 創建階段
該階段主要發生在創建組件類的時候，在這個階段中會初始化組件的屬性類型和默認屬性。
defaultProps / getDefaultProps()
這里會初始化一些默認的屬性，通常會將固定的內容放在這個過程中進行初始化和賦值，一個控件可以利用this.props獲取在這里初始化它的屬性，由于組件初始化后，再次使用該組件不會調用getDefaultProps函數，所以組件自己不可以自己修改props（即：props可認為是只讀的），只可由其他組件調用它時在外部修改。
在ES5里，屬性類型和默認屬性分別通過propTypes成員和getDefaultProps方法來實現。
//ES5
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
getDefaultProps: function() {? ? ? ??
? ? ? ? ? ? ? ?return {? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? autoPlay: false,? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?maxLoops: 10,? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ?};
},
在ES6里，可以統一使用static成員來實現.
//ES6
static?propTypes?=?{//用來指定props的類型
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? autoPlay:?React.PropTypes.bool.isRequired,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?maxLoops:?React.PropTypes.number.isRequired,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?posterFrameSrc:?React.PropTypes.string.isRequired,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? videoSrc:?React.PropTypes.string.isRequired,
};? //?注意這里有分號
static?defaultProps?=?{
? ? ? ? ? ? ? ? ? ? ? ? ? autoPlay:?false,
? ? ? ? ? ? ? ? ? ? ? ? ? ?maxLoops:?10,
};? //?注意這里有分號
2. 實例化階段
該階段主要發生在組件類被調用(實例化)的時候。
組件類被實例化的時候，觸發一系列流程：
1) constructor(props) / getInitialState()
這里是對控件的一些狀態進行初始化，由于該函數不同于getDefaultProps，在以后的過程中，會再次調用，所以可以將控制控件的狀態的一些變量放在這里初始化，如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值。
在ES5里，通過getInitialState對狀態進行初始化
getInitialState: function() {
? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? loopsRemaining: this.props.maxLoops,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?};
},
在ES6里，通過constructor(構造器)對狀態進行初始化
constructor(props){
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? ? ? ?loopsRemaining: this.props.maxLoops,
? ? ? ? ? ? ? ? ? ? ? ? ? ? };
? ? }
2) componentWillMount()
準備加載組件。
這個調用時機是在組件創建，并初始化了狀態之后，在第一次繪制 render() 之前。可以在這里做一些業務初始化操作，也可以設置組件狀態。這個函數在整個生命周期中只被調用一次。
如果在這個函數里面調用setState，本次的render函數可以看到更新后的state，并且只渲染一次。
3) render()
render是一個組件必須有的方法，形式為一個函數，渲染界面，并返回JSX或其他組件來構成DOM，和Android的XML布局、WPF的XAML布局類似，只能返回一個頂級元素。
4) componentDidUpdate()
調用了render方法后，組件加載成功并被成功渲染出來以后所執行的hook函數，一般會將網絡請求等加載數據的操作，放在這個函數里進行，來保證不會出現UI上的錯誤。
3. 運行(更新)階段
該階段主要發生在用戶操作之后，或者父組件有更新的時候，此時會根據用戶的操作行為，進行相應的界面結構調整。
觸發的流程如下：
1) componentWillReceiveProps(nextProps)
當組件接收到新的props時，會觸發該函數。在該函數中，通常可以調用setState()來完成對state的修改。
輸入參數 nextProps 是即將被設置的屬性，舊的屬性還是可以通過 this.props 來獲取。在這個回調函數里面，你可以根據屬性的變化，通過調用 this.setState() 來更新你的組件狀態，這里調用更新狀態是安全的，并不會觸發額外的 render() 調用。如下：
componentWillReceiveProps: function(nextProps) {
? ? ? ? ? ? ? ?this.setState({
? ? ? ? ? ? ? ? ? ? ? ? likesIncreasing: nextProps.likeCount > this.props.likeCount
? ? ? ? ? ? ? ? ? });
}
2) shouldComponentUpdate(nextProps, nextState)
返回布爾值（決定是否需要更新組件）
輸入參數 nextProps 和上面的 componentWillReceiveProps 函數一樣，nextState 表示組件即將更新的狀態值。這個函數的返回值決定是否需要更新組件，如果 true 表示需要更新，繼續走后面的更新流程。否者，則不更新，直接進入等待狀態。
默認情況下，這個函數永遠返回 true 用來保證數據變化的時候 UI 能夠同步更新。在大型項目中，你可以自己重載這個函數，通過檢查變化前后屬性和狀態，來決定 UI 是否需要更新，能有效提高應用性能。
3) componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者調用forceUpdate之后，就會開始準更新組件，并調用 componentWillUpdate()。
輸入參數與 shouldComponentUpdate 一樣，在這個回調中，可以做一些在更新界面之前要做的事情。需要特別注意的是，在這個函數里面，你就不能使用 this.setState 來修改狀態。這個函數調用之后，就會把 nextProps 和 nextState 分別設置到 this.props 和 this.state 中。緊接著這個函數，就會調用 render() 來更新界面了。
4) render()
再確定需要更新組件時，調用render，根據diff算法，渲染界面，生成需要更新的虛擬DOM數據。
5) componentDidUpdate()
虛擬DOM同步到DOM中后，執行該方法，可以在這個方法中做DOM操作。
除了首次render之后調用componentDidMount，其它render結束之后都是調用componentDidUpdate。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以對應起來。區別在于，前者只有在掛載的時候會被調用；而后者在以后的每次更新渲染之后都會被調用。
ps：絕對不要在componentWillUpdate和componentDidUpdate中調用this.setState方法，否則將導致無限循環調用。
4. 銷毀階段
該階段主要發生組件銷亡的時候，觸發componentWillUnmount。當組件需要從DOM中移除的時候，通常需要做一些取消事件綁定，移除虛擬DOM中對應的組件數據結構，銷毀一些無效的定時器等工作，都可以在這個方法中處理。
componentWillUnmount()
當組件要被從界面上移除的時候，就會調用 componentWillUnmount。
在這個函數中，可以做一些組件相關的清理工作，例如取消計時器、網絡請求等。
三、組件更新的方式（更新階段詳細）
本來是沒有想要要詳細寫這部分內容的，不過看到另一篇文章，寫得好好，就也放進來詳細講下，感謝原文作者
參考自：http://www.lxweimin.com/p/4784216b8194里的更新方式部分
更新組件（重新渲染界面）的方式有以下四種：
首次渲染Initial Render，即首次加載組件
調用this.setState，狀態發生改變（并不是一次setState會觸發一次render，React可能會合并操作，再一次性進行render）
父組件發生更新（一般就是props發生改變，但是就算props沒有改變或者父子組件之間沒有數據交換也會觸發render）
調用this.forceUpdate，強制更新
用圖來表示這四種方式如下：
四、總結
1. 組件生命周期總體流程圖
2. 生命周期的回調函數總結
生命周期 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?調用次數 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 能否使用 setSate()
defaultProps / getDefaultProps ? ? ? ? ? ? ? ? ? ? ? ? ?1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (全局調用一次)否
constructor / getInitialState ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?否
componentWillMount ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??是
render ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?>=1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?否
componentDidMount ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??是
componentWillReceiveProps ? ? ? ? ? ? ? ? ? ? ? ? ? ? >=0 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??是
shouldComponentUpdate ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?>=0 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 否
componentWillUpdate ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?>=0 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 否
componentDidUpdate ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? >=0 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 否
componentWillUnmount ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 否
