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开发工具经常使用快捷键大全》