React Native(RN)-组件生命周期

生命周期简介
像 Android 开发一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。 
 
(借用大神流程图)

这张图很简洁直观地告诉我们,生命周期的整个流程以及阶段划分。

第一阶段
getDefaultProps -> getInitialState -> componentWillMount ->render ->componentDidMount。 事实上,每个组件都会经历这个流程生命周期,是一个组件创建跟加载的过程。

getDefaultProps和getInitialState是对state跟props的初始化和设置,当然现在比较流行的写法,是直接在contructor构造器中直接对这两个状态进行设置
compinentWillMount中,可以进行一些业务的初始化,或者订阅RN广播。特别注意的是,在整个生命周期中,该方法只会被调用一次。
render,渲染方法,绝对不能在该方法调用改变状态的的方法(setState)!
componentDidMount,主要作用是通知组件已经加载完成。需要注意的是,RN 框架是先调用子组件的 componentDidMount() ,然后调用父组件的函数。该方法在整个生命周期中也是只调用一次!
 

第二阶段
运行中 ->属性(props)改变( 父层界面发生改变) ->componentWillReceiveProps->shouldComponentUpdate—true—>componentWillUpdate ->render->componentDidUpdate ->运行中。当然还有运行中—(状态发生改变)—>shouldComponentUpdate-…, 该过程发生在用户界面交互过程中。

componentWillReceiveProps:如果组件收到新的属性(props),就会调用该方法。在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。
shouldComponentUpdate:默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新
componentWillUpdate:其函数原型:void componentWillUpdate(object nextProps, object nextState),在这个方法中,可以做一些在更新界面之前要做的东西。不过在这里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。这个函数执行完,紧接着就会调用 render() 来更新界面了。
componentDidUpdate:调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知
 

第三阶段
卸载前->componentWillUnmount ->结束

componentWillUnmount:当组件要被从界面上移除的时候,就会调用该方法,可以在该方法中做一些清理的工作,比如清除RN广播,清除数据等
---------------------

总结 

生命周期 调用次数  能否使用setSate()
getDefaultProps      1(全局调用一次)
getInitialState      1
componentWillMount    1
render                >=1
componentDidMount    1
componentWillReceiveProps  >=0
shouldComponentUpdate                >=0
componentWillUpdate  >=0
componentDidUpdate    >=0
componentWillUnmount1

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值