Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期。今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧

android开发中,React Native组件的生命周期,大致分为三个阶段,分别是:

1、组件第一次绘制阶段,这个阶段主要是组件的加载和初始化;

2、组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面;

3、组件卸载消亡的阶段,这个阶段主要是组件的清理工作。

在Android React Native组件的整个生命周期中,还有10个回调函数,不得不知。

1、object getDefaultProps()在组件类创建的时候调用一次,然后返回值被缓存下来。

2、object getInitialState()在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

3、componentWillMount ()在初始化渲染执行之前立刻调用。

4、ReactComponent render()这个方法是必须的,对视图进行渲染,你也可以返回 null 或者 false 来表明不需要渲染任何东西。

5、componentDidMount()在初始化渲染执行之后立刻调用一次。

6、componentWillReceiveProps(object nextProps)在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。可以用于更新 state 来响应某个 prop 的改变。

7、boolean shouldComponentUpdate(object nextProps, object nextState)在接收到新的 props 或者 state,将要渲染之前调用,如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。返回true将进行渲染。

8、componentWillUpdate(object nextProps, object nextState)在接收到新的 props 或者 state 并且shouldComponentUpdate返回true时调用。

9、componentDidUpdate(object prevProps, object prevState)在组件的更新已经同步到 DOM 中之后立刻被调用。

10、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开发工具常用快捷键大全

时间: 2024-10-29 19:07:52

Android React Native组件的生命周期及回调函数的相关文章

Android React Native组件的生命周期

和Android一样,React的组件也有对应的生命周期.Android React Native组件的生命周期可以总的概括为下面这一张图. 可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作. 生命周期回调函数总共有10个. obje

React Native组件、生命周期及属性传值props详解

创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { render (){ return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text> } } 第二种:通过ES5的方式创建 /** * 方式二:ES5 */ var HelloComponent= React.c

React Native 中 component 生命周期

React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/51813677 (非原创) React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映

android四大基础组件--Service生命周期详解

android四大基础组件--ServiceService 生命周期详解 1.Service的生命周期: I> 在非绑定Service情况下,只有oncreate(),onStartCommand(),onDestory()方法情况下:  操作方法对应生命周期一: a.[执行startService(Intent)] 执行生命周期方法:oncreate()--->onStartCommand(): b.[执行stopService(Intent)] 执行生命周期方法:onDestory();

React:组件的生命周期

在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 当组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.render5.componentDidMount 当组件在服务端被实例化,首次被创建时

Android中各组件的生命周期

1.Activity生命周期图 二.activity三种状态 (1)active:当Activity运行在屏幕前台(处于当前任务活动栈的最上面),此时它获取了焦点能响应用户的操作,属于活动状态,同一个时刻只会有一个Activity处于活动(Active). (2)paused:当Activity失去焦点但仍对用户可见(如在它之上有另一个透明的Activity或Toast.AlertDialog等弹出窗口时)它处于暂停状态.暂停的Activity仍然是存活状态(它保留着所有的状态和成员信息并保持和

React(三)组件的生命周期

Component Specs and LifeCycle <div id="app"></div> <script src="bower_components/react/react.min.js"></script> <script src="bower_components/react/react-dom.min.js"></script> <script src

React Native组件生命周期

概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点.就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle). React Native组件的生命周期大致上可以划分为实例化阶段.存在阶段和销毁阶段.我们只有在理解组件生命周期的基础上,才能开发出高性能的app. React Native中组件的生命周期大致可以用以下图表示: 如图: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,

React Native 中组件的生命周期(转)

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第