React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段，其中最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理。在下图中描述了React Native中组件的生命周期，我们可以根据其中的执行顺序在对应的函数中做对应的操作
实例化阶段函数功能分析
getDefaultProps
该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数 中进行初始化和赋值； 在组件中，可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。getInitialState
该函数是用于对组件的一些状态进行初始化； 由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值， 比如： this.setState({ activePage: activePage, currentX: contentOffSetX }); 注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。componentWillMount
相当于OC中的ViewWillAppear方法，在组件将要被加载在视图上之前调用，功能相对较少。如果在render中改变了某些状态机变量，那么RN不会执行渲染，而是等待该函数执行完毕后再次渲染。子组件中同样拥有该方法，并会在父组件执行完毕后执行，该函数无返回值。该函数适合于需要在本地读取一些数据用于显示，那么在render执行前调用是一个很好的时机。render
render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局类似，注意：只能返回一个顶级元素 ; 此外，在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值 。componentDidMount
在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作； 因为UI已经成功被渲染出来， 所以放在这个函数里进行请求操作，不会出现UI上的错误。
在实例化阶段，我们可以通过一个示例来了解，通过触摸事件来改变函数的变量值：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
AlertIOS
} from 'react-native';
// ES5写法
var DTouchabelDemo = React.createClass({
// 不可改变的值
getDefaultProps(){
return{
age: 18
}
},
// 可以改变的值
getInitialState(){
return{
title:'不透明触摸',
person: '张三'
}
},
render() {
return (
<View ref="topView" style={styles.container}>
<TouchableOpacity
activeOpacity={0.5}
onPress={()=>this.activeEvent('点击')}
onPressIn={()=>this.activeEvent('按下')}
onPressOut={()=>this.activeEvent('抬起')}
onLongPress={()=>this.activeEvent('长按')}
>
<View style={styles.innerViewStyle}>
<Text ref="event">常用的事件</Text>
</View>
</TouchableOpacity>
<View>
<Text>{this.state.title}</Text>
<Text>{this.state.person}</Text>
<Text>{this.props.age}</Text>
</View>
</View>
);
},
activeEvent(event){
// 更新状态机
this.setState({
title: event,
person:'李四'
})
// 拿到View
this.refs.topView
this.refs.event
}
});
// ES6写法
// class DTouchabelDemo extends Component {
//
// }
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
innerViewStyle:{
backgroundColor:'red'
}
});
AppRegistry.registerComponent('DTouchabelDemo', () => DTouchabelDemo);存在期阶段函数功能分析
componentWillReceiveProps
指父元素对组件的props或state进行了修改，该函数的原型为componentWillReceiveProps(nextProps)，当props(属性)发生改变或者接受到新的props时，该函数被调用，并接受一个输入参数，类型为Object，存放新的props，原先反生改变的旧的props仍然可以通过this.props访问。该函数在RN初次被渲染的时候不会被调用。如果在该函数当中对状态机变量进行了修改，RN不会立即渲染页面，而是会等待该方法执行完毕后一起渲染。shouldComponentUpdate （组件是否需要更新）
该函数原型 : boolean shouldComponentUpdate(nextProps,nextState)，一般用于优化，可以返回false或true来控制是否进行渲染，当props(属性)或者状态(state)发生改变的时候会触发该函数，分别对应接收的两个参数，根据返回的布尔值来决定是否需要对页面进行重新渲染，如果不进行渲染，那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。该函数默认会返回true。应用场景：可以在该函数中编写一些逻辑来判断渲染类型，来阻值一些没有必要的重新渲染，达到提升应用运行效率的目的。componentWillUpdate
该方法原型与上一方法相同，在重新渲染前会调用该方法，为渲染进行准备工作。组件刷新前调用，类似componentWillMount。注意：在该方法中，不应该对状态机变量进行修改，要改变，也应该在1.1.5当中进行。componentDidUpdate
更新后的hook，该方法会在RN卸载之前调用，无参无返回值，在该方法中，需要对该组件当中申请或者订阅的某些资源与消息进行释放。
销毁期阶段函数功能分析
用于清理一些无用的内容，如：点击事件Listener，只有一个过程：componentWillUnmount
评论 (0)