React Native组件生命周期
概述
所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle)。 React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段。我们只有在理解组件生命周期的基础上,才能开发出高性能的app。 React Native中组件的生命周期大致可以用以下图表示:
如图:
- 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
- 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
- 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。
生命周期分析
实例化阶段分析
getDefaultProps 该函数用于初始化一些默认的属性,通常会将固定的内容放在这个函数 中进行初始化和赋值; 在组件创建之前,会先调用 getDefaultProps()初始化一些属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps(),所以组件自己不可以自己修改props。 getInitialState 该函数是用于对组件的一些状态进行初始化; 该函数不同于getDefaultProps,在以后的过程中,可以再次调用。 比如:
this.setState({
activePage: activePage,
currentX: contentOffSetX
});
注:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。 componentWillMount 这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。这个函数在整个生命周期中只被调用一次。 render是一个组件中必须有的方法,本质上是一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局类似。作用是通知系统准备加载组件。 componentDidMount 该方法是在调用了render方法后,通知组件已经加载完成。一般会在这个函数中处理网络请求等加载数据的操作;
存在期阶段分析
componentWillReceiveProps 如果组件收到新的属性(props),就会调用 componentWillReceiveProps()对组件的props或state进行了修改。 旧的属性还是可以通过 this.props 来获取,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。 shouldComponentUpdate 当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(…),通过返回false或true来控制是否进行界面的渲染。如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。
componentWillUpdate 如果组件状态或者属性改变,并且上面的 shouldComponentUpdate() 返回为 true,就会开始准更新组件,并调用 componentWillUpdate(),组件刷新前调用,有点类似于componentWillMount()。 componentDidUpdate 调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知,其函数原型如下:
void componentDidUpdate(
object prevProps, object prevState
)
销毁期阶段分析
componentWillUnmount 当组件要被从界面上移除的时候,就会调用 componentWillUnmount(),该函数可以做一些组件相关的清理工作,例如取消计时器、网络请求等。
总结
生命周期 |
调用次数 |
能否使用 setSate() |
---|---|---|
getDefaultProps |
全局调用1次 |
否 |
getInitialState |
1 |
否 |
componentWillMount |
1 |
是 |
render |
>=1 |
否 |
componentDidMount |
1 |
是 |
componentWillReceiveProps |
>=0 |
是 |
shouldComponentUpdate |
>=0 |
否 |
componentWillUpdate |
>=0 |
是 |
componentDidUpdate |
>=0 |
是 |
componentWillUnmount |
1 |
是 |
补充
什么是DOM Diff算法
Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化。在React中,构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面,然后由React来比较两个界面的区别,’这就需要对DOM树进行Diff算法分析。 即给定任意两棵树,找到最少的转换步骤。但是标准的的Diff算法复杂度需要O(n^3),这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的,势必需要对算法进行优化。这看上去非常有难度,然而Facebook工程师却做到了,他们结合Web界面的特点做出了两个简单的假设,使得Diff算法复杂度直接降低到O(n)两个相同组件产生类似的DOM结构,不同的组件产生不同的DOM结构;对于同一层次的一组子节点,它们可以通过唯一的id进行区分。
- JDK1.7源码分析01-Collection
- Spring boot自定义启动字符画(banner)
- 产品解析:Github Atom
- Docker+Jenkins持续集成环境(5): android构建与apk发布
- Docker+Jenkins持续集成环境(4):使用etcd+confd实现容器服务注册与发现
- 易企秀前端压缩源码分析与还原
- 关于 JS 拖拽功能的冲突问题及解决方法
- 使用 SVG 和 JS 创建一个由星形变心形的动画
- 如何使用 Bootstrap 搭建更合理的 HTML 结构
- Java遍历Map对象的四种方式
- java 线程public void run()中值如何返回
- Jackson与spring框架整合的坑
- spring shiro整合时自动注入的问题
- mybatis获取update的id
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Win10 下 SQL Server 安装教程(排坑版)
- Linux指令入门-文本处理
- 修改Mirages主题文章布局
- Python爬虫:Scrapy 框架快速入门及实战演练
- yum解决安装软件包缓慢问题
- Linux指令入门-文件与权限
- java.lang.NoSuchMethodError: org.apache.log4j.Logger.isTraceEnabled()Z
- RabbitMQ五种模型
- IDEA 无法识别 Nodejs 包中的关键字
- K8S问题记录
- Linux指令入门-系统管理
- 从零开始重新认识 MyBatis
- SpringCloud-Bus消息总线
- SpringCloud-Config配置中心
- CSS水平居中