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内核分析作业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 使…

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

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

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

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

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

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

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

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

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

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

UML类图几种关系的总结

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

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

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

Redis持久化RDB和AOF区别

RDBRDB是Redis内存到硬盘的快照,用于redis持久化,创建RDB二进制文件,将存储在内存中的数据,持久化的放到硬盘中,当我们需要这些数据的时候,启动载入RDB文件,数据将会被存入内存中,其…

央视力荐的这套书,让5岁孩子看漫画,秒懂物理,学习早“开窍”!

▲ 点击查看今年的高考,不得不说,一度被浙江学霸刷屏!他总分720分,物理等3门满分的成绩,最终获得“浙江高考状元”。状元能摘得桂冠,除了日积月累的不断努力外,最重要的是,不断调整自…

MongoDB基本操作(增删改查)

2019独角兽企业重金招聘Python工程师标准>>> 基本操作 基本的“增删查改“,在DOS环境下输入mongo命令打开shell,其实这个shell就是mongodb的客户端,同时也是一个js的编译器,默认连接的是“test”数据库。 【出错】 首先…

Kubernetes + .NET Core 的落地实践

1容器化背景本来生活网(benlai.com)是一家生鲜电商平台,公司很早就停止了烧钱模式,开始追求盈利。既然要把利润最大化,那就要开源节流,作为技术可以在省钱的方面想想办法。我们的生产环境是由 IDC 机房的 1…

传说中的宇宙最水诺奖得主:本科历史学,却凭借“一纸”博士论文摘取诺贝尔物理学奖,出道即巅峰!...

全世界只有3.14 % 的人关注了爆炸吧知识他,到底是不是最水的诺奖得主?超模君曾经介绍了学历史,最终成为数学、物理大牛的威滕(传送门),然而竟出现了德布罗意姥爷的高分点赞!那今天,超…

基于事件驱动架构构建微服务第13部分:使用来自Apache KAFKA的事件并将投影流传输到ElasticSearch...

原文链接:https://logcorner.com/building-microservices-through-event-driven-architecture-part13-read-model-projection-project-streams-into-elasticsearch/在本教程中,我将展示如何从KAFKA读取流并将流投影到ElasticSearch中。我必须使用来自KAF…

惊呆了!这篇论文全文都是脏话,可编辑部居然对它评价极佳并发表了!

全世界只有3.14 % 的人关注了爆炸吧知识本文转自:募格学术你见过最奇奇怪怪的论文是什么?一教授为了抗议三流科学杂志发送垃圾邮件,回复了一篇全文只重复七个脏话字眼的论文,可没想到的是,它竟然还被 出!版…

单IP无TMG拓扑Lync Server 2013:前端服务器

在前面的基础架构和活动目录两篇文章中,我们已经准备好了Lync Server的所有环境。其实今天虽然部署的是Lync Server 2013的Preview版,但实际上与我们部署Lync的步骤以及规范是完全一样的,所以大家完全可以抛开Lync Server 2013 Preview版本本…

MySQL学习笔记之五:存储引擎和查询缓存

一、存储引擎1、InnoDB⑴InnoDB是基于聚簇索引建立的,基于主键索引查询时,性能较好;它的辅助索引中必须包含主键列;因此,若表上的索引较多,为节约空间,主键应尽可能小⑵InnoDB支持自适应hash索引…

利用SOS扩展库进入高阶.NET6程序的调试

有时候我们可能想深入到程序的运行核心,去观察下内存分配情况以及堆栈内保存的东东,那么作为编程新贵的底层框架.NET6,又为我们提供了什么可用的观测工具呢?1.SOS 扩展是什么?SOS扩展库是Windows 附带的调试扩展库&…