相关文章

React Native探索系列

前言

React Native有很多组件比如Image、ListView等等,想要合理的使用组件,首先要先了解组件的生命周期。

1.概述

无论你是开发Android还是iOS,对于组件的生命周期一定不陌生,这是开发的基础。同样的React Native的组件也有生命周期,当应用启动,React Native在内存中维护着一个虚拟DOM,组件的生命周期就是指组件初始化并挂载到虚拟DOM为起始,到组件从虚拟DOM卸载为终结。生命周期的方法就是组件在虚拟DOM中不同状态的描述。



从上图所示,组件的生命周期分为三个阶段,分别是挂载(mounting)、更新(updating)和卸载(Unmounting),其中挂载和更新阶段都会调用rander方法进行绘制。下面对这三个阶段分别进行讲解。

如果觉得图小可以移步到:http://liuwangshu.cn/rn/component/1-lifecycle.html

2.挂载

挂载指的是组件的实例被创建并插入到DOM中,挂载会调用如下方法。

constructor

constructor是RN组件的构造方法,它在RN组件被加载前先被调用。当我们的组件继承自React.Component时,需要在构造方法中最先调用super(props)。如果不需要初始化state,则不需要实现构造方法。

在构造方法中初始化state,如下所示。

  1. constructor(props) {
  2. super(props);
  3. this.state = {
  4. text: '构造方法'
  5. };
  6. }

componentWillMount

  1. componentWillMount()

componentWillMount方法在挂载前被立即调用。它在render方法前被执行,因此,在componentWillMount方法中设置state并不会导致重新被渲染。它只会被执行一次,通常情况下,建议使用constructor方法来代替它。

rander

  1. render()

该方法是必须的,一旦调用,则会去检查 this.props 和 this.state 的数据并返回一个 React 元素。render方法中不应该修改组件的props和state,因为render方法是“纯洁的”,这意味着每次调用该方法时都会返回相同的结果。render方法在更新阶段也会被调用,前提是shouldComponentUpdate方法返回true。

componentDidMount

  1. componentDidMount()

componentDidMount方法在组件被挂载后立即调用,在render方法后被执行。开发者可以在这个方法中获取其中的元素或者子组件,需要注意的是,子组件的componentDidMount方法会在父组件的componentDidMount方法之前调用。如果需要从网络加载数据显示到界面上,在这里进行网络请求是一个不错的选择。在componentDidMount方法中设置state将会被重新渲染。

3.更新

改变props或者state时可以导致更新,当一个组件被重新渲染时,会调用如下方法。

componentWillReceiveProps

  1. componentWillReceiveProps(nextProps)

componentWillReceiveProps方法会在挂载的组件接收到新的props时被调用,它接收一个Object类型参数nextProps,表示新的props。通常在这个方法中接收新的props值,并根据props的变化,通过调用 this.setState() 来更新组件state,this.setState()不会触发 render方法的调用。

在挂载的过程中,初始的props并不会触发调用componentWillReceiveProps方法,这个方法只会在组件中的props更新时被调用,另外,调用this.setState()也不会触发调用componentWillReceiveProps方法。

shouldComponentUpdate

  1. boolean shouldComponentUpdate(nextProps, nextState)

当组件接收到新的props和state时,shouldComponentUpdate方法被调用,它接收两个Object参数,nextProps是新的props,nextState是新的state。

shouldComponentUpdate方法默认返回true,用来保证数据变化时,组件能够重新渲染。你也可以重载这个方法,通过检查变化前后props和state,来决定组件是否需要重新渲染。如果返回false,则组件不会被重新渲染,也不会调用本方法后面的componentWillUpdate和componentDidUpdate方法。

componentWillUpdate

  1. componentWillUpdate(nextProps, nextState)

如果组件props或者state改变,并且此前的shouldComponentUpdate方法返回为 true,则会调用该方法。componentWillUpdate方法会在组件重新渲染前被调用,因此,可以在这个方法中为重新渲染做一些准备工作。需要注意的是,在这个方法中,不能使用 this.setState 来更改state,如果想要根据props来更改state,需要在componentWillReceiveProps方法中去实现,而不是在这里。

componentDidUpdate

  1. componentDidUpdate(prevProps, prevState)

组件重新渲染完成后会调用componentDidUpdate方法。两个参数分别是渲染前的props和渲染前的state。这个方法也适合写网络请求,比如可以将当前的props和prevProps进行对比,发生变化则请求网络。

4.卸载

卸载就是从DOM中删除组件,会调用如下方法。

componentWillUnmount()

  1. componentWillUnmount()

componentWillUnmount方法在组件卸载和销毁之前被立即调用。可以在这个方法中执行必要的清理工作,比如,关掉计时器、取消网络请求、清除组件装载中创建的DOM元素等等。

组件的生命周期就讲到这里,这个系列的后续文章会介绍React Native的常用组件,敬请期待。

参考资料

The Component Lifecycle

Understanding the React Component Lifecycle

React Native 中组件的生命周期

《React Native跨平台移动应用开发》第二版


欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。

扫一扫下方二维码或者长按识别二维码,即可关注。

React Native组件(一)组件的生命周期的更多相关文章

  1. React Native学习(十)—— 生命周期

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  2. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

  3. React Native组件的结构和生命周期

    React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...

  4. .Net组件程序设计之对象生命周期

    .Net组件程序设计之对象生命周期 .NET 垃圾回收 IDisposable() Using语句 .NET 垃圾回收 是CLR管理着垃圾回收器,垃圾回收器监控着托管堆,而我们使用的对象以及系统启动是 ...

  5. Android四大组件之——Activity的生命周期(图文详解)

        转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai       联系方式:JohnTsai.Work@gmail.com       [Andro ...

  6. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  7. android开发3:四大基本组件的介绍与生命周期

    android开发3:四大基本组件的介绍与生命周期 Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver ...

  8. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  9. React源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...

  10. React 源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...

随机推荐

  1. Delphi 正则表达式语法(4): 常用转义字符与 .

    Delphi 正则表达式语法(4): 常用转义字符与 . // \d 匹配所有数字, 相当于 [0-9] var   reg: TPerlRegEx; begin   reg := TPerlRegE ...

  2. redmine安装及SVN(https)配置

    一键安装redmine https://blog.csdn.net/qq_26898315/article/details/50233483 配置SVN(引用: https://blog.csdn.n ...

  3. Codeforces - 55D Beautiful numbers (数位dp+数论)

    题意:求[L,R](1<=L<=R<=9e18)区间中所有能被自己数位上的非零数整除的数的个数 分析:丛数据量可以分析出是用数位dp求解,区间个数可以转化为sum(R)-sum(L- ...

  4. iPhone获取手机里面所有的APP(私有库)+ 通过包名打开应用

    1.获取到手机里面所有的APP包名 - (void)touss { Class lsawsc = objc_getClass("LSApplicationWorkspace"); ...

  5. 20145219 《Java程序设计》第08周学习总结

    20145219 <Java程序设计>第08周学习总结 教材学习内容总结 通用API 日志API 1.java.util.logging包提供了日志功能相关类与接口,使用日志的起点是log ...

  6. 谈谈对Canal(增量数据订阅与消费)的理解

    概述 canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费,目前主要支持了mysql(也支持mariaDB). 起源:早期,阿里巴巴B2B公司 ...

  7. Linux7关闭防火墙

    RedHat Enterprise Linux 7关闭防火墙方法 在之前的版本中关闭防火墙等服务的命令是 service iptables stop /etc/init.d/iptables stop ...

  8. no matching key exchange method found. Their offer: diffie-hellman-group1-sha1

    1. 使用git克隆项目报错 $ git clone ssh://liuchao@192.168.7.32:29418/platform/Midou Cloning into 'Midou'... U ...

  9. 并发-ConcurrentHashMap源码分析

    ConcurrentHashMap 参考: http://www.cnblogs.com/chengxiao/p/6842045.html https://my.oschina.net/hosee/b ...

  10. MVC viewbag & viewdata

    弱类型:ViewData[""] 动态型:ViewBag dynamic ViewData 是字典型的(Dictionary),ViewBag 不再是字典的键值对结构,而是dyna ...