react native组件的生命周期

一、当页面第一次加载时,会依次调用:

constructor()
componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。
render():组件渲染
componentDidMount() :虚拟 DOM 已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的 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组件的生命周期的更多相关文章

  1. Android React Native组件的生命周期及回调函数

    熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...

  2. 【RN - 基础】之React Native组件的生命周期

    下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...

  3. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  4. React Native——组件的生命周期

    组件生命周期 上流程图描述了组件从创建.运行到销毁的整个过程,可以看到如果一个组件在被创建,从开始一直到运行会依次调用getDefaultProps到render这五个函数:在运行过程中,如果有属性和 ...

  5. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  7. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  8. React:组件的生命周期

    在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...

  9. react教程 — 组件的生命周期 和 执行顺序

    一.组件执行的生命周期:                  参考  https://www.cnblogs.com/soyxiaobi/p/9559117.html  或  https://www.c ...

随机推荐

  1. iOS开发--MQTT实时处理数据

    一. MQTT 一个物联网项目中用到了MQTT协议, 可以用来做设备与软件之间的互通. MQTT: 即时通讯协议, 传输层协议 二. 常用: 1.MQTTKit(已经不维护了) 2.MQTTClien ...

  2. js toFixed()方法的坑

    javascript中toFixed使用的是银行家舍入规则. 银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法. 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零 ...

  3. js(jQuery)tips

    一:页面加上$(function(){***内容***})与不加的区别 1.这个是DOM加载完之后再加载JS代码,你的JS如果放在文档后面可能一样,但是如果你要是把JS放在head里面就有差别了(放在 ...

  4. windows下开启 PHP扩展Redis

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  5. PyAutoGui 中遇到的KeyError : DISPLAY

    实际情形有可能是: tests/test_enlighten.py:: in <module> import re, sys, signal, logging, argparse, pya ...

  6. 关于if与switch的使用与区别

    这是if语句: if (条件表达式1){ //条件判断 //n多语句1 }else if(条件表达式2){ //n多语句2 }else if(条件表达式3){ //n多语句3 } ... ... el ...

  7. aircrack-ng 破解无线网络

    1.科普当今时代,wifi 已成为我们不可缺少的一部分,上网.看视频.玩游戏,没有 wifi 你就等着交高额的流量费吧,本来我想单独的写 wpa 破解和 wps 破解,后来觉得分开写过于繁琐,索性合并 ...

  8. 20155325 实验三 敏捷开发与XP实践

    实验三 敏捷开发与XP实践-1 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse的内容替换成IDEA 在IDEA中使用工具(Code-> ...

  9. jdk各种老版本的下载链接

    java SE 1.6各个版本 jdk  api http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downlo ...

  10. js获取IE版本,while代码很特别

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...