RN组件生命周期详解

RN组件的生命周期大致可分为三大部分
加载
运行
卸载


1.加载

getDefaultProps

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

constructor(旧:getInitalState)

contructor将在任意一个RN组件被加载之前优先调用,并且只会调用一次。
该函数最大的作用是定义该组件当中需要使用的状态机变量 。

componentWillMount

该函数整个过程中只执行一次,该函数会在初始渲染前执行,即在render被调用之前调用,该函数执行后render就会调用。
如果在render中改变了某些状态机变量,那么RN不会执行渲染,而是等待该函数执行完毕后再次渲染。
子组件中同样拥有该方法,并会在父组件执行完毕后执行,该函数无返回值。
该函数适合于需要在本地读取一些数据用于显示,那么在render执行前调用是一个很好的时机。

render

调用该方法,先对状态机变量与属性进行检查。
如果开发者不想渲染界面的话,可以在此处返回null或者false。
该方法适用于进行界面的JSX代码编写,因此不适合在此处对状态机变量进行修改或者访问服务器。

componentDidMount

该函数会在render渲染完毕之后调用,整个过程只执行一次。
该函数执行后,开发者就可以对界面上的组件或者子组件进行各种操作了。
该函数的应用场景适用于在移动端应用启动之后需要访问网络进行某些数据获取。

2.运行

componentWillReceiveProps

当props(属性)发生改变或者接受到新的props时,该函数被调用,并接受一个输入参数,类型为Object,存放新的props,原先反生改变的旧的props仍然可以通过this.props访问。
该函数在RN初次被渲染的时候不会被调用。
如果在该函数当中对状态机变量进行了修改,RN不会立即渲染页面,而是会等待该方法执行完毕后一起渲染。

shouldComponentUpdate

当props(属性)或者状态(state)发生改变的时候会触发该函数,分别对应接收的两个参数,根据返回的布尔值来决定是否需要对页面进行重新渲染,如果不进行渲染,那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。
该函数默认会返回true。

componentWillUpdate

在接收到新的 props 或者 state 之前立刻调用。
该方法原型与上一方法相同,在重新渲染前会调用该方法,为渲染进行准备工作。

componentDidUpdate

在组件的更新已经同步到 DOM 中之后立刻被调用。
该函数会在重新渲染render之后调用,传入上个方法必须的两个参数即可。

3.卸载

componentWillUnmount

该方法会在RN卸载之前调用,无参无返回值,在该方法中,需要对该组件当中申请或者订阅的某些资源与消息进行释放。
在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

该方法会在RN卸载之前调用,无参无返回值,在该方法中,需要对该组件当中申请或者订阅的某些资源与消息进行释放。

在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

本文内容摘自:https://www.jianshu.com/p/c6222eb59af5

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Carlos@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值