ReactNaive组件生命周期

xiaoxiao2021-02-28  193

7

ReactNaive组件生命周期

ReactNative 的生命周期大概分为三阶段,实例化阶段,运行阶段,销毁阶段

RN 组件的生命周期整理如下图

实例化阶段:是组件第一次绘制阶段,如图中的红色框内,在这里完成了组件的加载和初始化;

运行阶段:是组件在运行和交互阶段,如图中绿色线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;

销毁阶段:是组件卸载消亡的阶段,如图中蓝色线框,这里做一些组件的清理工作。

实例化阶段

constructor:

调用时间 : 开始实例化组件的时候调用 作用 : 初始化state.

componentWillMount:

调用时间 : 即将加载组件的时候调用 作用 : 在render之前做事情

render:

调用时间 : 渲染组件的时候调用 作用 : 渲染UI界面

componentDidMount:

调用时间 : 加载组件完成的时候调用 作用 : 通知组件已经加载完成,在render之后做事情,发送请求等

注意:constructor,componentWillMount,componentDidMount 只会调用一次, render 大于一次。

运行阶段

componentWillReceiveProps:

调用时间 : 每次传入Props,就会调用 作用 : 拦截props

shouldComponentUpdate:

调用时间 : 每次props,或者state改变,就会调用 作用 : 控制是否刷新界面

componentWillUpdate:

调用时间 : 组件即将更新调用 作用 : 在render更新前做事情

componentDidUpdate:

调用时间 : 组件更新完成调用 作用 : 在render更新后做事情

注意 :绝对不要在componentWillUpdate,componentDidUpdate中调用this.setState方法,否则将导致无限循环调用,在componentWillReceiveProps,shouldComponentUpdate可以。

销毁阶段

componentWillUnmount:

调用时间 : 组件即将销毁的时候调用 作用 : 移除观察者,清空数据

转载请注明原文地址: https://www.6miu.com/read-27093.html

最新回复(0)