Android React Native組件的生命週期及回調函數

       熟悉android的童鞋應該都清楚，android是有生命週期的，其不少組件也是有生命週期。今天小編和你們分享的React Native組件的生命週期，還不瞭解的童鞋，趕忙來圍觀吧

       在android開發中，React Native組件的生命週期，大體分爲三個階段，分別是：

一、組件第一次繪製階段，這個階段主要是組件的加載和初始化；

二、組件在運行和交互階段，這個階段組件能夠處理用戶交互，或者接收事件更新界面；

三、組件卸載消亡的階段，這個階段主要是組件的清理工做。

 

在Android React Native組件的整個生命週期中，還有10個回調函數，不得不知。

一、object getDefaultProps()在組件類建立的時候調用一次，而後返回值被緩存下來。

二、object getInitialState()在組件掛載以前調用一次。返回值將會做爲 this.state 的初始值。

三、componentWillMount ()在初始化渲染執行以前馬上調用。

四、ReactComponent render()這個方法是必須的，對視圖進行渲染，你也能夠返回 null 或者 false 來代表不須要渲染任何東西。

五、componentDidMount()在初始化渲染執行以後馬上調用一次。

六、componentWillReceiveProps(object nextProps)在組件接收到新的 props 的時候調用。在初始化渲染的時候，該方法不會調用。能夠用於更新 state 來響應某個 prop 的改變。

七、boolean shouldComponentUpdate(object nextProps, object nextState)在接收到新的 props 或者 state，將要渲染以前調用，若是肯定新的 props 和 state 不會致使組件更新，則此處應該 返回 false。返回true將進行渲染。

八、componentWillUpdate(object nextProps, object nextState)在接收到新的 props 或者 state 而且shouldComponentUpdate返回true時調用。

 

九、componentDidUpdate(object prevProps, object prevState)在組件的更新已經同步到 DOM 中以後馬上被調用。

十、componentWillUnmount()在組件從 DOM 中移除的時候馬上被調用。在該方法中執行任何須要的清理，好比無效的定時器，或者清除在 componentDidMount 中建立的 DOM 元素。

 

爲加深你們對相關知識的掌握和了解，下面咱們一塊兒來看看測試代碼吧：

 

/**

* Sample React Native App

* http://www.maiziedu.com

*/

'use strict';

var React = require('react-native');

var {

  AppRegistry,

  StyleSheet,

  View,

} = React;

var AwesomeProject = React.createClass({

  //在組件類建立的時候調用一次，而後返回值被緩存下來。

  getDefaultProps:function(){

    console.log("getDefaultProps");

    return null;

  },

  //初始化狀態,在組件掛載以前調用一次。返回值將會做爲 this.state 的初始值。

  getInitialState:function(){

    console.log("getInitialState");

    return null;

    //必須有返回值，能夠是NULL或者一個對象。

  },

  //組件將要被渲染

  componentWillMount:function(){

    console.log("componentWillmount");

  },

  //渲染視圖

  render:function(){

    console.log("render");

    return (

      <View>

      </View>

    );

    //你也能夠返回 null 或者 false 來代表不須要渲染任何東西

  },

  //渲染視圖完成後

  componentDidMount:function(){

    console.log("componentDidMount");

    this.loadDataToSetState();

  },

  //組件接收到新屬性,在初始化渲染的時候，該方法不會調用。

  componentWillReceiveProps:function(nextProps){

    console.log("componentWillReceiveProps");

    //console.log(nextProps);

  },

  //組件是否須要更新

  shouldComponentUpdate:function(nextProps,nextState){

    console.log("shouldComponentUpdate");

    //console.log(nextProps+"|"+nextState);

    return true;

  },

  //組件將要被更新

  componentWillUpdate:function(nextProps,nextState){

    console.log("componentWillUpdate");

    //console.log(nextProps+"|"+nextState);

  },

  //組件更新完畢

  componentDidUpdate:function(prevProps,prevState){

    console.log("conponentDidUpdate");

    //console.log(prevProps+"|"+prevState);

  },

  //組件被銷燬以前，作清理操做

  componentWillUnmount:function(){

    console.log("componentWillUnmount");

  },

  loadDataToSetState:function(){

    console.log("loadDataToSetState");

    this.setState({

      name : "RN"

    })

  },

});

var styles = StyleSheet.create({

});

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

 

最後的輸出以下，咱們再 componentDidMount 中調用了 loadDataToSetState 函數，該函數中經過了setState函數對state進行了設置，這時候就會回調shouldComponentUpdate，若是返回true，則會繼續調用 componentWillUpdate ， render , conponentDidUpdate ，以後按返回鍵退出應用，則會進行銷燬操做，回調

 

componentWillUnmount

 

getDefaultProps

getInitialState

componentWillmount

render

componentDidMount

loadDataToSetState

shouldComponentUpdate

componentWillUpdate

render

conponentDidUpdate

componentWillUnmount

 

而關於 componentWillReceiveProps 函數的觸發是在props屬性改變以後纔會觸發，我在代碼中嘗試着修改這個屬性，可是無果，會報錯，姑且不理會。只要理解了什麼時候調用就行了。

而關於調試，React-Native官網提供了一個Chrome下調試的插件，見 Chrome Developer Tools ，安裝了該插件後，在手機上的開發者選項中開啓debug js，就能夠在chrome中看到控制檯輸出的信息以及js的報錯信息了。

 

以上就是Android React Native組件的生命週期及相關函數的使用，但願對你們學習相關知識有所幫助。

 

相關文章：《Android開發工具經常使用快捷鍵大全》