概述

就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:

如图,可以把组件生命周期大致分为三个阶段:

  • 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
  • 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
  • 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。

生命周期回调函数

下面来详细介绍生命周期中的各回调函数。

getDefaultProps

在组件创建之前,会先调用 getDefaultProps(),这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 getInitialState(),来初始化组件的状态。

componentWillMount

然后,准备加载组件,会调用 componentWillMount(),其原型如下:

void componentWillMount() 

这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

componentDidMount

在组件第一次绘制之后,会调用 componentDidMount(),通知组件已经加载完成。函数原型如下:

void componentDidMount()  

这个函数调用的时候,其虚拟 DOM 已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的 componentDidMount(),然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求。这个函数也是只被调用一次。这个函数之后,就进入了稳定运行状态,等待事件触发。

componentWillReceiveProps

如果组件收到新的属性(props),就会调用 componentWillReceiveProps(),其原型如下:

void componentWillReceiveProps(
object nextProps
)

输入参数 nextProps 是即将被设置的属性,旧的属性还是可以通过 this.props 来获取。在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。如下:

componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}

shouldComponentUpdate

当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(...),函数原型如下:

boolean shouldComponentUpdate(
object nextProps, object nextState
)

输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样,nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件,如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。

默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定 UI 是否需要更新,能有效提高应用性能。

componentWillUpdate

如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件,并调用 componentWillUpdate(),其函数原型如下:

void componentWillUpdate(
object nextProps, object nextState
)

输入参数与 shouldComponentUpdate 一样,在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。

componentDidUpdate

调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知,其函数原型如下:

void componentDidUpdate(
object prevProps, object prevState
)

因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了 prevProps 和 prevState

componentWillUnmount

当组件要被从界面上移除的时候,就会调用 componentWillUnmount(),其函数原型如下:

void componentWillUnmount()  

在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。

总结

到这里,RN 的组件的完整的生命都介绍完了,在回头来看一下前面的图,就比较清晰了,把生命周期的回调函数总结成如下表格:

生命周期 调用次数 能否使用 setSate()
getDefaultProps 1(全局调用一次)
getInitialState 1
componentWillMount 1
render >=1
componentDidMount 1
componentWillReceiveProps >=0
shouldComponentUpdate >=0
componentWillUpdate >=0
componentDidUpdate >=0
componentWillUnmount 1
 
来源:https://race604.com/react-native-component-lifecycle/

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

  1. React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  2. React Native中组件的props和state

    一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...

  3. react native环境搭建与生命周期

    1.搭建开发环境 英文文档:http://facebook.github.io/react-native/docs/getting-started.html 中文文档:https://reactnat ...

  4. Tomcat中组件的生命周期管理公共接口Lifecycle

    Tomcat的组件都会实现一个Lifecycle接口,以方便组件的生命周期的统一管理 interface Lifecycle 组件生命周期中主要的几个方法 增加监听器,事件委托机制 public vo ...

  5. 使用Lifecycle管理Tomcat中组件的生命周期

    大型软件和汽车制造工厂一样,组件繁多,关系复杂,相互协同完成了汽车的生产过程.软件中的Object就像是工厂中component一样. 下面来看看相关的类和接口: abstract class Lif ...

  6. React 中组件的生命周期

    先上代码, react 用的是 15.0.1 <!DOCTYPE html> <html> <head> <script src="./build/ ...

  7. React Native组件(一)组件的生命周期

    相关文章 React Native探索系列 前言 React Native有很多组件比如Image.ListView等等,想要合理的使用组件,首先要先了解组件的生命周期. 1.概述 无论你是开发And ...

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

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

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

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

随机推荐

  1. continue break return

    ontinue: 可以让程序跳过,continue关键字之后的语句,回到while循环的第一行命令 break: 让程序完全跳出循环,结束while循环的执行 return: 从查询或过程中无条件退出 ...

  2. CTF传送门

    https://www.zhihu.com/question/30505597详细见知乎 推荐书: A方向: RE for BeginnersIDA Pro权威指南揭秘家庭路由器0day漏洞挖掘技术自 ...

  3. ef linq 查询某时间段内数据 踩的坑

    var now = DateTime.Now;var list =db.Jinbi_TypeLimit.Where(x => x.IsAvailable && x.JinbiTy ...

  4. oracle学习篇八:约束

    ----约束------- --1.主键约束--唯一标识,不能为空,通常用于ID--1>创建主键create table person(id varchar2(20) primary key,n ...

  5. 面向对象三大特性——封装(含property)

    一.封装概念 封装是面向对象的特征之一,是对象和类概念的主要特性. 封装就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. 二.隐藏属性 在p ...

  6. 牛客提高R5 A.同余方程

    题意 题目链接 Sol 设\(solve(x, y)\)表示\(i \in [0, x], j \in [0, y]\)满足题目要求的方案数 首先容斥一下,\(ans = solve(r_1, r_2 ...

  7. 【linux学习笔记】began,每次玩这个都特别着迷

    胡乱的安装,通过虚拟机,从DVD加载开始,当然网上有大段的装机教程,装了两个Linux发行版,一个是centos7,一个是ubuntu18.04. 分区那些事: 因为处于学习阶段,所以总是因为分区问题 ...

  8. angular监听移动端键盘的弹起和收回

    页面的提交按钮采用的是固定定位在页面的底部,键盘弹出后,提交按钮紧挨着键盘的上方,输入框获得焦点后,键盘弹出,并且输入框回自动定位上方的空白处,此时由于键盘上方固定定位的提交按钮的原因有可能会遮挡住获 ...

  9. OLAP和数据挖掘的区别

    总结来说: 数据仓库提供了一个分析的数据源 数据挖掘能分析出未知的信息,提出假设 OLAP能通过分析,验证假设 从技术角度看,商务智能的过程是企业的决策人员以企业中的数据仓库为基础,经由数据挖掘工具. ...

  10. GridView的分页代码

    1.前台代码 <PagerTemplate><div style="text-align:center; color:Blue"> <asp:Link ...