刚开始接触RN时时一脸懵逼,由于之前没怎么搞过前端开发,所以看网上的例子和源码都是一头雾水。iOS中有viewDidLoad(初始化界面)、viewWillAppear(布局)、viewWillDisappear、viewDidAppear几个状态方便我们掌握程序的动向。
一个React Native组件的生命周期分为实例化、存在期和销毁期,其中最常用的为实例化期,该时期即组件的构建、展示时期,需要开发者根据几个函数的调用过程,控制好组件的展示和逻辑的处理。能为了更好理解好别人的代码和源码更近了一步
(1)实例化期分为5个阶段,每个阶段以一个函数来进行控制,具体如下:
getDefaultProps:顾名思义,这里会初始化一些默认的属性,通常会将固定的内容放在这个过程中进行初始化和赋值,一个控件可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。所以无法调用
this.setProps({
showText:'Hello world'
});
此函数调用在getInitialState:函数之前不过在ES6中已经不是当前的调用形式在ES6中如下调用
//ES6 这两个属性不能卸载class内
class CTestDemo extends Component{
render()
{return(
<Text>{this.props.showText}</Text>
);}
}
CTestDemo.propTypes={
//属性校验期,表示改属性必须是bool,否则报错
showText:React.PropTypes.bool
};
CTestDemo.defaultProps={//设置默认属性
showText:'Hello world'
};
getInitialState:这里是对控件的一些状态进行初始化,由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值,修改方式如下:
getInitialState(){
return{
showText:'Hello world'
}
}
this.setState({
showText:'Hello world'
});
以上方法也是ES5的写法,最新的ES6写法有变更
constructor(props){
super(props);
this.state={
showText:'Hello world'
}
}
以上都是ES5和ES6的区别本质上都是一样的,
componentWillMount:可以通过字面意思看出,这个方法被调用时期是组件将要被加载在视图上之前,功能比较少,即:render一个组件前最后一次修改state的机会。相当于iOS中的viewWillAppear
render:上面已经说过render是一个组件必须有的方法,形式为一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局、WPF的XAML布局类似,只能返回一个顶级元素,即:值得注意的是,一旦调用了this.setState方法,控件必将调用render方法,对控件进行再次的渲染.不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染
componentDidMount:即调用了render方法后,组件加载成功并被成功渲染出来以后所执行的hook函数,一般会将网络请求等加载数据的操作,放在这个函数里进行,来保证不会出现UI上的错误,相当于ios中的viewDidAppear如图所示,_fetchData利用了fetch API来异步请求Web API来加载商品数据:
(2)存在期主要是用来处理与用户的交互,如:点击事件,都比较简单,也不是很常用,具体有以下几个过程:
componentWillReceiveProps:指父元素对组件的props或state进行了修改
shouldComponentUpdate:一般用于优化,可以返回false或true来控制是否进行渲染
componentWillUpdate:组件刷新前调用,类似componentWillMount
componentDidUpdate:更新后的hook
(3)销毁期,用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount
3.总结
总得来讲,React Native组件的生命周期,经历了Mount->Update->Unmount这三个大的过程,即从创建到销毁的过程,如果借助iOS的开发思想,那么React Native组件的生命周期就更容易理解了。那么,我们构建一个React Native控件也就能够知道如何下手,如何控制和优化。经过一层一层的封装和调用,一个完整的React Native应用也就构建出来了。