在React Native中使用组件来封装界面模块时,整个界面就是一个大的组件,开发过程就是不断优化和拆分界面组件、构造整个组件树的过程。
1.组件的属性
props:它是组件的不可变属性。组件自身定义了一组props作为对外提供的接口,展示一个组件时只需要指定props作为节点的属性。一般组件很少需要对外公开方法,唯一的交互途径就是props。所以说它也是父组件与子组件通信的桥梁。
下面举一个简单的例子来说明props。
有一个父组件Menu和一个子组件MyListView。
class Menu extends Component { constructor() { super(); this.state = { data: 'react native 组件生命周期学习',} } render() { /* 返回一个根组件*/ return ( <MyListView data = {this.state.data} /> ); } }
子组件MyListView的定义如下: class MyListView extends Component { props: { data: String,} render() { return ( <View> <Text>{this.props.data} </Text> </View> ); } }
在上面的代码片段中,MyListView有一个props属性成员data。在父组件Menu中,通过节点属性的方式传值给子组件。
state:它是组件的内部状态属性,主要用来存储组件自身需要的数据。除了初始化时可能由props来决定,之后就完全由组件自身去维护。组件中由系统定义了setState方法,每次调用时都会更新组件的状态,触发render方法。需要注意的是render方法是被异步调用的,这可以保证同步的多个setState方法只会触发一次render,这样做是有利于提高性能的。
下面利用一个代码片段示例来说明state属性。先说一下需求:点击一下图片,实现计数的加一操作。
class ListItem extends Component { state: { /* 点赞数*/ likeNum: number,} componentWillMount() { this.state = { likeNum: 0,} } render() { return ( <View > <TouchableHighlight onPress = {() => this._onPressImage(this.state.likeNum)}> <Image source = {require('./img/hand@2x.png')} /> </TouchableHighlight> <Text > {this.state.likeNum}</Text> </View> ); } _onPressImage(likeNumd: number) { this.setState({ likeNum: (likeNumd + 1),}); } }
在这个代码片段中,定义了一个state属性(likeNum)。当点击Image的时候,触发了_onPressImage方法。在该方法中通过调用系统的setState方法修改state的值。当修改完以后,系统就会自动触发render方法,从而完成界面的重新渲染。
2.组件的生命周期
对于自定义组件,除了必须实现的render方法,还有一些其他的可选方法可被调用。这些方法会在组件的不同时期之行,所以也可以说这些方法是组件的生命周期方法。
对于组件的生命周期来说一般分为四个阶段:分别为:创建阶段、实例化阶段、更新阶段、销毁阶段。
下面分别说一下这四个阶段。
1)创建阶段
2)该阶段主要发生在创建组件类的时候,在这个阶段中会初始化组件的属性类型和默认属性。
3)在ES5中会触发getDefault这个生命周期方法,每次创建组件的时候执行且只执行一次。在ES6中可以统一使用static成员来实现。代码示例如下:
static defaultProps = { iconName: '',}; static propTypes = { iconName: React.PropTypes.string.isrequired,};
实例化阶段
该阶段主要发生在组件类被调用(实例化)的时候。
组件类被实例化的时候,触发一系列流程:
1)getInitialState。在这里可以初始化state的值;在ES6中我们也可以将初始化state的操作放constructor构造方法中去做;
2)componentWillMount()。在组件渲染之前调用。在这个方法中根据业务逻辑对state进行操作;
3)render()。根据state的值,生成对应虚拟DOM结构。并返回该结构;
4)componentDidMount()。虚拟DOM转为真实DOM。组件内部可以通过一个this.getDOMNode()来获取当前组件节点。
更新阶段
该阶段主要发生在用户操作之后,或者父组件有更新的时候,此时会根据用户的操作行为,进行相应的界面结构调整。触发的流程如下:
1)componentWillReceiveProps。当组件接收到新的props时,会触发该函数。在该函数中,通常可以调用setState()来完成对state的修改。
2)shouldComponentUpdate。可以拦截新的props或state,决定要不要更新组件。
3)componentWillUpdate。在更新之前做一些操作。
4) render。根据diff算法,生成需要更新的虚拟DOM数据。
5) componentDidUpdate。虚拟DOM同步到DOM中后,执行该方法,可以在这个方法中做DOM操作。
销毁阶段
该阶段主要发生组件销亡的时候,触发componentWillUnmount。当组件需要从DOM中移除的时候,通常需要做一些取消事件绑定,移除虚拟DOM中对应的组件数据结构,销毁一些无效的定时器等工作,都可以在这个方法中处理。
下面借鉴一个说明组件生命周期的比较清晰的图