您的位置:首页 > Web前端 > React

react-native--生命周期

2016-07-18 15:20 295 查看
一:



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

第一阶段:组件第一次绘制

第二阶段:组件运行和交互

第三阶段:组件卸载和消亡阶段

三:生命周期回调函数详解

-1:getDefaultProps():

在组件创建之前,会先调用一次本方法,全局调用一次。严格来说,这不是组件声明周期的一部分,在组件被创建并加载的时候,首先调用getInitialState()来初始化组件的状态;

-2:componentWillMount():

调用时机是在组件创建,并初始化了状态之后,在第一次绘制render()调用;在整个生命周期中,只被调用一次;

-3:componentDidMount():

在组件第一次绘制之后,会调用本方法通知组件已经加载完成;从这个函数开始,就可以和js进行交互了;本函数也是会被调用一次,调用完成之后,就进入稳定运行状态,等待事件触发;

-4:componentWillReceiveProps():

如果组件收到新的属性(props),会调用本方法;输入参数nextProps是即将被设置的属性,旧的属性还是可以通过this.props来获取。在本函数可以根据属性的变化,通过调用this.setState()来更新组件状态,这里的更新是安全的,不会出发额外的 render();

-5:shouldComponentUpdate():

组件接收到新的属性和状态改变事,会调用本方法,组件返回true来决定ui是否需要更新

-6:componentWillUpdate():

若组件状态或属性改变,并且shouldComponentUpdate()返回true()时,就会开始更新组件,并且调用本函数;在本函数中,不能使用this.setState来修改状态值;

-7:componentDidUpdate():

调用了 render()更新完成界面之后,会调用本函数来得到通知;

-8:componentWillUnmount()():

当组件要被从界面上移除的时候,就会调用本函数,可以做一些组件的清理工作,如,取消计时器,网络请求等;

总结:

在生命周期中,可以使用setState的地方有三处,方法分别为:

componentWillMount();

componentDidMount();

componentWillReceiveProps();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  函数