react native组件的生命周期
前言
- 对于习惯了iOS开发的同学,可能会对React Native中组件的生命周期很困惑。在iOS中有一个ViewDidLoad来初始化,那么在RN中,又是在哪里呢?
一、看图分析
- 在下图中描述了React Native中组件的生命周期,我们可以根据其中的执行顺序在对应的函数中做对应的操作。
react-native组件的生命周期
- React Native组件的生命周期大致上可以划分为
实例化阶段、存在阶段 和销毁阶段 ,其中最常用的为实例化阶段 ,该阶段就是组件的构建、展示时期,需要我们根据几个函数的调用过程,控制好组件的展示和逻辑的处理。
二、实例化阶段函数功能分析
getDefaultProps
getInitialState
-
该函数是用于对组件的一些状态进行初始化;
-
由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值, 比如: this.setState({
activePage: activePage,currentX: contentOffSetX
});
- 注意:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。
componentWillMount
- 相当于OC中的ViewWillAppear方法,在组件将要被加载在视图上之前调用,功能相对较少。
render
componentDidMount
三、存在期阶段函数功能分析
componentWillReceiveProps 指父元素对组件的props或state进行了修改
shouldComponentUpdate 一般用于优化,可以返回false或true来控制是否进行渲染
componentWillUpdate 组件刷新前调用,类似componentWillMount
componentDidUpdate 更新后的相关操作
四、销毁期阶段函数功能分析
componentWillUnmount
- 用于清理一些无用的内容,如:点击事件Listener,定时器等等
五、常用知识点分析
this.state
状态更新引起界面更新
-
当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
-
可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值,根据diff算法算出来有差以后,就会执行ReactDom的render方法,重新渲染页面。
-
注意:由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|