react native组件的生命周期
react native组件的生命周期
一、当页面第一次加载时,会依次调用:
render()
之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。componentDidMount()
,然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout
或者 setInterval
,或者发起网络请求。这个函数也是只被调用一次。这个函数之后,就进入了稳定运行状态,等待事件触发。二、页面状态state更改时:
例子,点击页面组件,数字加1:
constructor(props) {
super(props)
console.log('_____constructor_____')
this.state = {
count: 0
}
}
render() {
console.log('___render___')
return (
<View>
<Text onPress = {() =>{
this.setState({
count: this.state.count+1
})
}}>
点击增加
</Text>
<Text>{this.state.count}</Text>
</View>
);
}
这个时候生命周期会依次调用:
shouldComponentUpdate():当组件接收到新的属性和状态改变。
componentWillUpdate():如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...)
返回为 true
,就会开始准更新组件
render():组件渲染
componentDidUpdate():属性和状态完成更新
三、属性(props)改变时:
componentWillReceiveProps():组件收到新的属性(props)
四、组件关闭
componentWillUnmount():组件要被从界面上移除的时候,在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等
注意:
shouldComponentUpdate()默认返回true,true
表示需要更新,继续走后面的更新流程。
shouldComponentUpdate() {
console.log('_____shouldComponentUpdate_____')
return true
}
当返回值为false时,则不更新,直接进入等待状态。componentWillUpdate()、render()、componentDidUpdate()都不会执行
react native组件的生命周期的更多相关文章
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- 【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- React Native——组件的生命周期
组件生命周期 上流程图描述了组件从创建.运行到销毁的整个过程,可以看到如果一个组件在被创建,从开始一直到运行会依次调用getDefaultProps到render这五个函数:在运行过程中,如果有属性和 ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
- reactjs入门到实战(七)---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- React:组件的生命周期
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...
- react教程 — 组件的生命周期 和 执行顺序
一.组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.c ...
随机推荐
- App Store 加急审核解析
什么是加急审核 首先,提交二进制文件到 App Store,是要交给 App Store Review 团队去审核的.下面这句话是我从他们那边拿到的官方数据: On average, 50 perce ...
- Difftime
功 能:返回两个time_t型变量之间的时间间隔,即 计算两个时刻之间的时间差. 用 法: double difftime(time_t time2, time_t time1);
- 20181101noip模拟赛T1
思路: 我们看到这道题,可以一眼想到一维差分 但这样的复杂度是O(nq)的,显然会T 那么怎么优化呢? 我们会发现,差分的时候,在r~r+l-1的范围内 差分增加的值横坐标相同,纵坐标递增 减小的值横 ...
- Windows10系统在VMware中安装CentOS7操作系统并实现图形化用户界面Gnome
由于操作系统课程需要,我尝试在windows10环境下安装linux虚拟机,最终采用centOS7和Gnome图形用户界面,在安装和使用过程中出现一些问题,在这里将其记录下来,以便后续查阅. 第一部分 ...
- 小程序中 function (res)的理解
刚看到小程序里面一段代码 success: function (res) { console.log('搜索结果:'); console.log(res); wx.hideToast(); if (r ...
- Rabbitmq(一)
ClientA,ClientB: 为Producer,数据的发送方. Client1,Client2,Client3:为Consumer,数据的接收方. Exchange:消息交换 ...
- nginx 开启phpinfo
在nginx配置文件中加 location / { //如果是资源文件,则不走phpinfo模式 if (!-e $request_filename){ ewrite ^/(.*)$ /index.p ...
- 大数据学习--day12(内部类)
内部类学习 定义在类的内部的类 叫做内部类 包含了内部类的类 叫做外部类 内部类的作用 内部类是为了 实现 java中 多继承而存在的 内部类 可以继承其他类 ...
- Docker Toolbox下配置国内镜像源-阿里云加速器
Docker machine安装 Docker Machine是一个简化Docker安装的命令行工具,通过一个简单的命令行即可在相应的平台上安装Docker,比如VirtualBox. Digital ...
- LeetCode——数组篇:659. 分割数组为连续子序列
659. 分割数组为连续子序列 输入一个按升序排序的整数数组(可能包含重复数字),你需要将它们分割成几个子序列,其中每个子序列至少包含三个连续整数.返回你是否能做出这样的分割? 示例 1: 输入: [ ...