<h2>一、生命週期流程圖</h2>
下面是通過ProcessOn繪製的React Native組件生命週期流程圖，可以先大致看一下，有一個初步的概念，下文會詳情介紹。
<h2>二、基礎鞏固</h2>
props
組件的不可變屬性，在組件外部賦值，在組件內部使用，當在組件內部props發生變化，組件不會重新渲染。
props是子組件與父組件通信的橋樑。
props是父組件向子組件傳遞數據的紐帶。
ReactNativeActivity向Js傳遞數據的接收載體。
舉個栗子具體說明，假設有父組件ComponentParent和一個子組件Search，代碼結構如下。
//父組件
var ComponentParent = React.createClass({
getInitialState: function () {
return { data: 5, };
},
getSearchValue:function(val){
this.setState({ })
},
render: function () {
return (
<View>
<View>
<Search getSearchValue = {this.getSearchValue} configData={this.state.data}></Search>
</View>
</View>
);
},
});
//子組件
var Search = React.createClass({
getInitialState(){
return { value:"" }
},
getDefaultProps: function () {
return { configData: 0 };
},
transferValue: function (val) {
this.props.getSearchValue(val);
},
render: function () {
return (
<View >
<Text>{this.props.configData}</Text>
<Text onPress={this.transferValue.bind(this,this.state.value)}>確定</Text> </View> );
},
});```
- 子組件調用父組件的屬性，關鍵代碼`{this.props.configData}`可以獲取父組件的`{this.state.data}`的值在子組件中使用。而`configData`是`this.props`的一個組成成員，可以隨意定義名字及任意多個props的成員。而在`getDefaultProps`方法中可以設置props的默認值。
- 子組件調用父組件的方法， 同理，在父組件通過` <Search getSearchValue = {this.getSearchValue}> `向子組件中傳遞可調用的方法。子組件通過`this.props.getSearchValue(val)`來調用方法，並向父組件中的方法傳值。
- 從Activity或者Fragment等Native向Js傳值，`this.props`負責接收。
//在Activity中添加如下代碼
@Nullable
@Override
protected Bundle getLaunchOptions() {
Bundle opt = new Bundle();
opt.putString("nativeValue","You are Best!!");
return opt;
}```
在index.android.js中去接收從Activity傳入nativeValue值 。
var ComponentParent = React.createClass({
getDefaultProps: function () {
return { nativeValue:"" };
},
render: function () {
return (
<View style={styles.container}>
<Text style={styles.welcome}>{this.props.nativeValue}
</Text>
</View>
);
},
});```
**state**
組件的可變屬性，用來存儲組件自身所需要的數據，React會監聽組件的state屬性的變化，一旦狀態變化，就會調用組件的render方法更新UI。
- 使用代碼示例 `{this.transferValue.bind(this,this.state.value)}`
- 賦值的代碼示例
getValue: function (text) {
var value = text;
this.setState({ value: value });
},```
- state屬性，需要在
getInitialState方法中進行初始化。注意任何狀態的改變，都會引起render方法的執行，所以不建議在render內部改變state的值，容易造成無限刷新，導致內存溢出。
<h2>三、組件生命週期介紹</h2>
創建階段
1、 getDefaultProps方法作用於組件類，也就是調用React.createClass()的時候被調用。每次創建組件的時候執行且只執行一次，方式如 Reload JS。
作用用來處理props的默認值。
note：如果在JS文件中定義了一個組件，但是沒有使用它，此組件的getDefaultProps也會被調用。組件內部不允許對props進行修改，只能通過調用她的父組件來修改，也就是從父組件向當前組件進行傳值，在組件的內部去使用或展示這個值。
實例化階段
作用於組件的實例，當組件被調用的時候執行
2、getInitialState方法初始化組件的state值，返回值將賦值給this.state。作用相當於自定義控件的構造函數及成員變量初始化。
3、componentWillMount組件開始渲染render之前被調用。所以控件展示之前的邏輯處理，應該在這個函數中實現。作用相當於Fragment生命週期中的onCreate方法。
4、render方法根據State的值，開始渲染，生成一個虛擬的DOM，並返回。組件所需的控件及初始值在這裏定義。相當於MVVM開發模式中的Xml資源文件。返回值：null、false、返回View結構
5、componentDidMount方法在最初的render方法調用之後立即調用。在這個方法中，父組件可以訪問子組件的任意引用。子組件的componentDidMount方法在父組件的此方法之前調用。網絡請求、事件訂閱等操作可以在這個方法中調用。作用相同與Fragment生命週期中的onViewCreate方法。以上是創建一個組件，及不更新組件數據的情況下的整個生命週期，
更新階段
6、componentWillReceiveProps方法接收更新之後的props。如果props沒有更新，此方法不調用。
7、shouldComponentUpdate方法當this.state的值有變化時，先執行此方法，此返回值爲true/false，判斷是否執行更新操作，即是否執行render渲染。所以可以在此方法中編寫當狀態改變時是否重新渲染的邏輯。
8、componentWillUpdate方法執行更新render方法之前需要做的處理。同componentWillMount方法，可以修改state值。
9、componentDidUpdate方法組件的更新已同步到DOM中，可以進行DOM操作。
銷燬階段
10、componentWillUnMount組件生命週期的最後一步，組件將走到生命的盡頭，_，這是我們需要做一些回收的工作。如取消事件綁定，關閉網絡連接等操作。以上說全部生命週期的介紹，我們在看一遍流程圖，是否有一個新的認識。
總結
1、 組件被創建後，如果不被調用，將只調用getDefaultProps方法。
2、 componentWillMount和componentWillUpdate方法，是render調用之前最後一個方法，可以用來處理this.state賦值操作及業務邏輯。
3、 因爲this.state狀態的改變，會重新渲染組件，render方法會執行，所以不要在render中做對this.state值改變操作，只用來展示。 f 否則很有可能造成循環渲染，導致程序崩潰。
相關例子github地址：https://github.com/YongHuiLuo/ComponentLifeCycle