从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。
ES6语法和之前的ES5语法有所变化,本篇文章是根据ES6语法写的。
在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建时,调用一次,它的返回值成为了this.props的初始值。
而ES6语法中,属性的类型和默认值声明不像ES5语法那样在组件定义内部声明,而是在组件定义的外部声明,所以声明周期函数没有了getDefaultPropTypes了,但是声明DefaultPropTypes也是在组件创建的时候调用一次。具体可以参考我的另一篇文章React Native声明属性和属性确认
constructor 构造方法
这个方法会在组件创建的时候调用一次。 这个方法中可以通过this.state初始化状态机(ES5是通过getInitialState方法初始化的)。 一般还在该方法中进行方法的bind(this)
的操作。
constructor(props) {
super(props);
// 初始状态
this.state = {
content: 'Content will appear here'
};
console.log("constructor")
}
componentWillMount
在React Native组件的生命周期中,这个函数只会被执行一次。 它在初始渲染(render函数被React Native矿建调用执行)前被执行,当它执行完后,render函数会马上被React Native框架调用执行。
如果在这个函数中通过setState函数修改状态机变量,RN框架不会额外执行渲染。
如果子组件也有componentWillMount函数,会在父组件之后调用。
如果需要从本地存储中读取数据用于显示,这个函数是一个不错的选择。
componentDidMount
在React Native组件的生命周期中,这个函数只会被执行一次,它在初始渲染完成后会马上被调用。在这之后开发者可以通过子组件的引用来访问,操作任何子组件。
如果RN组件的子组件也有componentDidMount
函数,并会在父组件的componentDidMount
函数之前被调用。
一般情况在这个方法中请求网络数据是一个不错的选择。
componentWillReceiveProps
这个函数原型是:
componentWillReceiveProps(object nextProps)
在React Native组件的初始渲染完成后,当React Native组件接收到新的props时,这个函数将被调用。 参数就是新的props。
再次强电下,初次渲染时不会调用该方法,是故意设计这种机制的
如果新的props会导致界面重新渲染,这个函数将在渲染前执行。如果函数中修改状态机,框架不会立刻执行状态机改变的渲染而是等函数执行完了一起渲染。
shouldComponentUpdate
这个函数的原型是:
boolean shouldComponentUpdate(object nextProps, object nextState)
React Native组件的初始渲染执行完成后, RN组件接收到新的state或者props时这个函数会调用。
函数需要返回一个布尔值,告诉React Native框架针对这次改变是否重新渲染, 如果返回false,不会渲染,相应的下面两个方法 componentWillUpdate
和componentDidUpdate
函数不会调用。
通过这个函数阻止无必要的重新渲染,是提高React Native应用程序性能的一大技巧。
componentWillUpdate
这个函数的原型是:
componentWillUpdate(object nextProps, object nextState)
初始渲染完成后,重新渲染前会调用这个函数。但是这个函数不能通过this.setState再次改变状态机变量的值。
componentDidUpdate
其函数原型是:
componentDidUpdate(object preProps,object prevState)
RN组件初始渲染完成后,RN框架在重新渲染RN组件完成后调用。
参数是渲染前的props和 state
componentWillUnmount
函数原型:
componentWillUnmount()
在RN组件被卸载前,这个函数将被执行。
更多精彩请关注微信公众账号likeDev
从零学React Native之12 组件的生命周期的更多相关文章
- 从零学React Native之08Image组件
开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...
- 从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- 从零学React Native之02状态机
本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭 ...
- 从零学React Native之13 持久化存储
数据持久化就是指应用程序将某些数据存储在手机存储空间中. 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 ...
- React Native学习(十)—— 生命周期
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- React第二篇:组件的生命周期
前言:因为生命周期是必须要掌握的,所以React的第二篇咱就写这. (版本:16.3.2) React的生命周期大致分为四个状态:分别是Mouting.Updating.Unmounting.Erro ...
- 从零学React Native之04自定义对话框
本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进 ...
- 从零学React Native之10Text
在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中.虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么 ...
随机推荐
- 一句代码上传MultipartFile图片到指定文件夹
代码如下: public class TestFile { void upload(MultipartFile file) throws IOException { file.transferTo(n ...
- 基于TensorFlow理解CNN中的padding参数
1 TensorFlow中用到padding的地方 在TensorFlow中用到padding的地方主要有tf.nn.conv2d(),tf.nn.max_pool(),tf.nn.avg_pool( ...
- lost connection to MySQL server at waiting for initial communication packet,system error:o
1 可以先测试mysql本地连接石否正常 2 正常的话查看远程连接的IP在mysql中是否有权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIF ...
- @EnableAsync使用
EnableAsync注解的意思是可以异步执行,就是开启多线程的意思.可以标注在方法.类上. 1 @Component 2 public class Task { 3 4 @Async 5 publi ...
- 请问Pycharm如何实现变量的批量重命名?
1.点击你要改的单词,右键refactor ->rename 2. Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换
- 【html、CSS、javascript-13】前端框架Bootstrap
1.Bootstrap前端框架:包含css样式.js插件.图标等 http://www.bootcss.com/ 2.Font Awesome:非常全的图标大全 https://fontawesome ...
- mongodb本地搭建过程
1.解压安装包后安装 安装时注意:1.选择customs 2.路径选择C盘以外的盘符 安装完成后: 2.在bin的同级目录下新建data.log文件夹 3.在data文件夹下新建db文件夹,在l ...
- ES6 新的数据类型Map和Set
Map Map是一组键值对的结构,具有极快的查找速度. 举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array: var names = ['Michael', 'Bo ...
- hibernate hql语句 group by having 的坑
我期望获得这个列表 然而,使用hql只能获得第一条数据,后来我琢磨了一下,和group by有关系 应该改成 成功查询到
- solr问题missing content stream
在使用solrj建立索引的时候,报错:missing content stream; 原因在于 HttpSolrServer httpSolrServer = new HttpSolrServer(s ...