Android之React Native 中组件的生命周期

React Native 中组件的生命周期

概述

就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:


如图,可以把组件生命周期大致分为三个阶段:


第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。



生命周期回调函数

下面来详细介绍生命周期中的各回调函数。


getDefaultProps

在组件创建之前,会先调用 getDefaultProps(),这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 getInitialState(),来初始化组件的状态。


componentWillMount

然后,准备加载组件,会调用 componentWillMount(),其原型如下:

void componentWillMount()  


这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

componentDidMount

在组件第一次绘制之后,会调用 componentDidMount(),通知组件已经加载完成。函数原型如下:

void componentDidMount()  

这个函数调用的时候,其虚拟 DOM 已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的 componentDidMount(),然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求。这个函数也是只被调用一次。这个函数之后,就进入了稳定运行状态,等待事件触发。

componentWillReceiveProps

如果组件收到新的属性(props),就会调用 componentWillReceiveProps(),其原型如下:

void componentWillReceiveProps(  object nextProps
)

输入参数 nextProps 是即将被设置的属性,旧的属性还是可以通过 this.props 来获取。在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。如下:


componentWillReceiveProps: function(nextProps) {  this.setState({likesIncreasing: nextProps.likeCount > this.props.likeCount});
}

shouldComponentUpdate

当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(...),函数原型如下:

boolean shouldComponentUpdate(  object nextProps, object nextState
)



输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样,nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件,如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。


默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定 UI 是否需要更新,能有效提高应用性能。


componentWillUpdate

如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件,并调用 componentWillUpdate(),其函数原型如下:


void componentWillUpdate(  object nextProps, object nextState
)


输入参数与 shouldComponentUpdate 一样,在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。


componentDidUpdate

调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知,其函数原型如下:


void componentDidUpdate(  object prevProps, object prevState
)


因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了 prevProps 和 prevState。


componentWillUnmount

当组件要被从界面上移除的时候,就会调用 componentWillUnmount(),其函数原型如下:


void componentWillUnmount()  

在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。

总结

到这里,RN 的组件的完整的生命都介绍完了,在回头来看一下前面的图,就比较清晰了,把生命周期的回调函数总结成如下表格:


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/295048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当女朋友学会「监视」男朋友......

1 日本网友拍到两只水母互殴!▼2 打印机也会生气?(素材来源网络,侵删)▼3 现在你们可以互换卡槽了~(素材来源网络,侵删)▼4 有什么适合整蛊朋友的恶作剧▼5 哈哈哈哈哈&#xff…

使用.NET5、Blazor和Electron.NET构建跨平台桌面应用

Electron.NET是一个嵌入了ASP.NET Core的Electron的封装,通过Electron.NET可以构建基于.NET5的跨平台的桌面应用,使得开发人员只需要使用ASP.NET Core和 Blazor就可以胜任桌面应用的开发工作。开发环境操作系统Windows/macOS/Linux.NET5.0npm创建新项目创…

蜗蜗 Linux内核芬妮下,201402 - 蜗窝科技

作者:wowo 发布于:2014-2-27 17:01分类:统一设备模型在“Linux内核的整体架构”中,蜗蜗有提到,由于Linux支持世界上几乎所有的、不同功能的硬件设备(这是Linux的优点),导致Linux内核中有一半的代码是设备驱…

linux内核分析作业3:跟踪分析Linux内核的启动过程

内核源码目录 1、 arch:录下x86重点关注 2、 init:目录下main.c中的start_kernel是启动内核的起点 3、 ipc:进程间通信的目录 实验 使用实验楼的虚拟机打开shell cd LinuxKernel/ qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd rootfs.img 使…

图表中各个参数的应用( AChartEngine XMultipleSeriesRenderer

图表中各个参数的应用( AChartEngine XMultipleSeriesRenderer 运行demo可以发现,它的所有chart都是可以移动,背景色为黑。。。。不过我们有时候会希望chart不动或者改变背景色等一些样式。 这节就介绍一些demo中没有使用的但有很常见的一些关…

用正则匹配多行文本

如果有这样一个字符串 $var "src arr.c build.c eval.c field.c \ missing.c msg.c re.c version.c" 用一般的^\w\s*\s*.*$只能匹配上面的那句,而下面的那一句就无法匹配了 方法一:使用的是perl $var "src arr.c build.c eval.c fiel…

Android之用HttpURLConnection参数以XML形式封装的部分关键代码

HttpURLConnection参数以XML形式封装 //得到连接public static HttpURLConnection setRequest(String urlStr) {HttpURLConnection con = null;try {URL url = new URL(urlStr);try {con = (HttpURLConnection) url.openConnection();con.setDoOutput(true);con.setDoInput(tru…

linux安装定制添加输入,Arch Linux--定制自己的Linux操作系統(乙-國際化桌面安裝篇)...

Arch Linux--定制自己的Linux操作系統----乙-國際化&桌面安裝篇相信大家看了《甲-安裝篇》之後,Arch Linux系統已經可以正常運行了吧?不過,Arch Linux默認…

ToLookup 和 GroupBy 到底有什么不同?

咨询区 Shlomo&#xff1a;.ToLookup<TSource, TKey> 返回的是 ILookup<TKey, TSource>, 但我发现 ILookup<TKey, TSource> 同时也实现了 IEnumerable<IGrouping<TKey, TSource>> 接口。.GroupBy<TSource, TKey> 直接返回的是 IEnumerabl…

这几部经典纪录片,竟然还有人没看过?

全世界只有3.14 % 的人关注了爆炸吧知识看纪录片&#xff0c;既可以追溯上下数千年的历史文化&#xff0c;也可以欣赏从宇宙到地心深处的奇妙境界&#xff0c;而及其超级精彩的画面即使定格&#xff0c;也是一幅摄影佳作。纪录片题材广泛、制作精良&#xff0c;观看起来算的上是…

Android之获取屏幕和视图高和宽

在android中&#xff0c;画布Canvas的高宽其实是屏幕的高宽。 1. WindowManager windowManager getWindowManager(); Display display windowManager.getDefaultDisplay(); screenWidth display.getWidth(); screenHeight display.getHeight(); 2DisplayMetrics d…

Html5 Video 节点

1、支持的视频格式 当前&#xff0c;video 元素支持三种视频格式&#xff1a;格式 IE Firefox Opera Chrome Safari Ogg No 3.5 10.5 5.0 No MPEG4 9.0 No No 5.0 3.0 WebM No 4.0 10.6 6.0 NoO…

github 上微信判断是否被删除的源码 以及使用解惑

为什么80%的码农都做不了架构师&#xff1f;>>> 从Github上的https://github.com/0x5e/wechat-deleted-friends&#xff0d;&#xff0d;clone出来的代码 今天在我的机器上不能运行了&#xff0c;环境为Mac 10.10 python2.7.10中 提示错误&#xff0c; Traceback (…

【转】android makefile文件分析

Makefile的规则如下&#xff1a; target ... : prerequisites ... command ... ... target可以是一个目标文件&#xff0c;也可以是Object File&#xff08;例如helloworld.obj&#xff09;&#xff0c;也可以是执行文件和标签。 prerequisites就是生成target所需要的文件或是目…

坑爹!千万不要在生产环境使用控制台日志

前言某控制台应用程序会随机卡死&#xff0c;一直找不到原因。无意中在控制台敲了下回车&#xff0c;发现程序居然恢复正常了。最后在stackoverflow上找到了这个帖子&#xff1a;How and why does QuickEdit mode in Command Prompt freeze applications?[1]原来是“快速编辑模…

这五部关于海洋的纪录片,每一帧都犹如壁纸!

全世界只有3.14 % 的人关注了爆炸吧知识虽说读万卷书不如行万里路&#xff0c;但现在足不出户也能让你见识到世界各地的奇特风景。今天小编要推荐几部关于海洋的纪录片&#xff0c;这些纪录片从不同方面揭示了深海下面的奥秘&#xff0c;带你领略不一样的神秘景色。&#xff08…

UML类图几种关系的总结

在UML类图中&#xff0c;常见的有以下几种关系:泛化&#xff08;Generalization&#xff09;, 实现&#xff08;Realization&#xff09;,关联&#xff08;Association&#xff09;,聚合&#xff08;Aggregation&#xff09;,组合(Composition)&#xff0c;依赖(Dependency) 1…

linux内核分析与移植,内核分析移植

1.make menuconfig添加对s3c2440的支持system type--> s3c2440 machine--> smdk24402. __lookup_machine_type处理uboot传来的 machine id 获得一个 表示该id的 machine_desc 结构体smdk2440的 machin_desc 结构体的定义如下/arch/arm/mach-s3c2440/mach-smdk2440.cMA…

Samba服务器简介及自动挂载配置案例

一、简介 Samba是一个工具套件&#xff0c;在Unix上实现SMB(Server Message Block&#xff09;协议&#xff0c;或 者称之为NETBIOS/LanManager协议。SMB协议通常是被windows系列用来实现磁 盘和打印机共享。 SMB应用功能 SAMBA 最初发展的主要目就是要用来沟通Windows 与 Unix…

Ruby:字符集和编码学习总结

背景 Ruby直到1.9版本才很好的支持了多字节编码&#xff0c;本文简单总结了今天学习的关于Ruby编码方面的知识。 字符串可以使用不同的编码 在.NET中字符串的编码是一致的&#xff0c;Ruby允许字符串有不同的编码&#xff0c;当时我就在想&#xff1a;如果两个不同编码的字符串…