在Android中Activity有七個(gè)生命周期方法，ReactNative組件也不例外，合理調(diào)用這些生命周期方法是每個(gè)項(xiàng)目合理開(kāi)發(fā)的關(guān)鍵。先來(lái)看看RN組件的生命周期方法流程圖：

ReactNative組件生命周期.jpg

開(kāi)始介紹之前我們先看一下RN中如何在控制臺(tái)顯示打印的調(diào)試信息。
RN中通過(guò)console.log();可以用來(lái)打印調(diào)試信息，在需要調(diào)試的地方加入

console.log('需要顯示的具體信息');

即可。

運(yùn)行程序后搖一搖手機(jī)
會(huì)出現(xiàn)以下菜單

device-2017-05-10-132831.png

選擇第二項(xiàng)Debug JS Remotely 。
打開(kāi)瀏覽器并打開(kāi)開(kāi)發(fā)者控制臺(tái)，在控制臺(tái)窗口下即可查看輸出的信息，如下圖所示：

下面來(lái)分析生命周期方法

（1）getDefaultProps（）

在組件創(chuàng)建之前，會(huì)先調(diào)用 getDefaultProps() ，這是全局調(diào)用一次，嚴(yán)格地來(lái)說(shuō)，這不是組件的生命周期的一部分。在組件被創(chuàng)建并加載候，首先調(diào)用 getInitialState() ，來(lái)初始化組件的狀態(tài)。并且當(dāng)你調(diào)用這個(gè)方法時(shí)會(huì)提示你

就是說(shuō)如果需要定義默認(rèn)屬性得通過(guò)

static defaultProps = {
};

方式來(lái)定義。

getInitialState也是這樣

所以如果要定義state建議在constructor(props) 中來(lái)初始化組件的狀態(tài)。

（2）componentWillMount（）

這個(gè)函數(shù)調(diào)用時(shí)機(jī)是在組件創(chuàng)建，并初始化了狀態(tài)之后，在第一次繪制 render() 之前。可以在這里做一些業(yè)務(wù)初始化操作，也可以設(shè)置組件狀態(tài)。這個(gè)函數(shù)在整個(gè)生命周期中只被調(diào)用一次。

（3）componentDidMount（）

在組件第一次繪制之后，會(huì)調(diào)用 componentDidMount()，通知組件已經(jīng)加載完成。這個(gè)函數(shù)調(diào)用的時(shí)候，其虛擬 DOM 已經(jīng)構(gòu)建完成，你可以在這個(gè)函數(shù)開(kāi)始獲取其中的元素或者子組件了。需要注意的是，RN 框架是先調(diào)用子組件的 componentDidMount()，然后調(diào)用父組件的函數(shù)。從這個(gè)函數(shù)開(kāi)始，就可以和 JS 其他框架交互了，例如設(shè)置計(jì)時(shí) setTimeout 或者 setInterval，或者發(fā)起網(wǎng)絡(luò)請(qǐng)求。這個(gè)函數(shù)也是只被調(diào)用一次。這個(gè)函數(shù)之后，就進(jìn)入了穩(wěn)定運(yùn)行狀態(tài)，等待事件觸發(fā)。

（4）componentWillReceiveProps（nextProps）

如果組件收到新的屬性（props），就會(huì)調(diào)用該方法。參數(shù) nextProps 是即將被設(shè)置的屬性，舊的屬性還是可以通過(guò) this.props 來(lái)獲取。在這個(gè)回調(diào)函數(shù)里面，你可以根據(jù)屬性的變化，通過(guò)調(diào)用 this.setState() 來(lái)更新你的組件狀態(tài)，這里調(diào)用更新?tīng)顟B(tài)是安全的，并不會(huì)觸發(fā)額外的 render() 調(diào)用。

（5）shouldComponentUpdate（nextProps，nextState）

當(dāng)組件接收到新的屬性和狀態(tài)改變的話，都會(huì)觸發(fā)調(diào)用該方法。參數(shù) nextProps 和上面的 componentWillReceiveProps 函數(shù)一樣，nextState 表示組件即將更新的狀態(tài)值。這個(gè)函數(shù)的返回值決定是否需要更新組件，如果 true 表示需要更新，繼續(xù)走后面的更新流程。否者，則不更新，直接進(jìn)入等待狀態(tài)。
默認(rèn)情況下，這個(gè)函數(shù)永遠(yuǎn)返回 true 用來(lái)保證數(shù)據(jù)變化的時(shí)候 UI 能夠同步更新。在大型項(xiàng)目中，你可以自己重載這個(gè)函數(shù)，通過(guò)檢查變化前后屬性和狀態(tài)，來(lái)決定 UI 是否需要更新，能有效提高應(yīng)用性能。

（6）componentWillUpdate（nextProps，nextState）

如果組件狀態(tài)或者屬性改變，并且上面的 shouldComponentUpdate(...) 返回為 true，就會(huì)開(kāi)始準(zhǔn)更新組件，并調(diào)用該方法。輸入?yún)?shù)與 shouldComponentUpdate 一樣，在這個(gè)回調(diào)中，可以做一些在更新界面之前要做的事情。需要特別注意的是，在這個(gè)函數(shù)里面，你就不能使用 this.setState 來(lái)修改狀態(tài)。這個(gè)函數(shù)調(diào)用之后，就會(huì)把 nextProps 和 nextState 分別設(shè)置到 this.props 和 this.state 中。緊接著這個(gè)函數(shù)，就會(huì)調(diào)用 render() 來(lái)更新界面了。

（7）componentDidUpdate（prevProps，prevState）

調(diào)用了 render() 更新完成界面之后，會(huì)調(diào)用該方法來(lái)得到通知，因?yàn)榈竭@里已經(jīng)完成了屬性和狀態(tài)的更新了，此函數(shù)的輸入?yún)?shù)變成了 prevProps 和 prevState。

（8）componentWillUnmount（）

當(dāng)組件要被從界面上移除的時(shí)候，就會(huì)調(diào)用 該方法。在這個(gè)函數(shù)中，可以做一些組件相關(guān)的清理工作，例如取消計(jì)時(shí)器、網(wǎng)絡(luò)請(qǐng)求等。

（9）constructor(props)

初始化時(shí)調(diào)用一次，并且是在componentWillMount（）之前調(diào)用。

完整調(diào)試代碼如下:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Alert,
  Button,
  View
} from 'react-native';



export default class LifeCycle extends Component {

   constructor(props) {
    console.log('constructor');
    super(props);
    this.state = {num: 1,}
  }

  // getDefaultProps(){
  //   console.log('getDefaultProps');
  // }

  // getInitialState(){
  //   console.log('getInitialState');
  // }

  componentWillMount(){
    console.log('componentWillMount');
    this.onButtonPressed=this._onButtonPressed.bind(this);
  }

  componentDidMount(){
    console.log('componentDidMount');
  }

  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps');
  }

  shouldComponentUpdate(nextProps,nextState){
    console.log('shouldComponentUpdate');
    return true;
  }

  componentWillUpdate(nextProps,nextState){
    console.log('componentWillUpdate');
  }

  componentDidUpdate(prevProps,prevState){
    console.log('componentDidUpdate');
  }

  componentWillUnmount(){
    console.log('componentWillUnmount');
  }



  _onButtonPressed(){
      this.setState({num:this.state.num+1});
  };

  render() {
    console.log('render');
    return (
      <View style={{margin:32}}>
        <Button style={{width:512,height:48}}title="按鈕" color="#841584"onPress={this.onButtonPressed}/>
      </View>
    );
  }
}

AppRegistry.registerComponent('LifeCycle', () => LifeCycle);