一、看图分析
在下图中描述了React Native中组件的生命周期，我们可以根据其中的执行顺序在对应的函数中做对应的操作
React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段，其中最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理。
二、实例化阶段函数功能分析
- getDefaultProps
该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数 中进行初始化和赋值；
在组件中，可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。
- getInitialState
该函数是用于对组件的一些状态进行初始化；
由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改**statev值， 比如：
this.setState({
activePage: activePage,
currentX: contentOffSetX
});
注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。
- componentWillMount
相当于OC中的ViewWillAppear方法，在组件将要被加载在视图上之前调用，功能相对较少。
- render
render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局类似，注意：只能返回一个顶级元素 ;
此外，在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值 。
- componentDidMount
在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作；
因为UI已经成功被渲染出来， 所以放在这个函数里进行请求操作，不会出现UI上的错误。
下图是利用了fetch API来异步请求Web API来加载数据：
三、存在期阶段函数功能分析
- componentWillReceiveProps：指父元素对组件的props或state进行了修改
- shouldComponentUpdate：一般用于优化，可以返回false或true来控制是否进行渲染
- componentWillUpdate：组件刷新前调用，类似componentWillMount
- componentDidUpdate：更新后的hook
四、销毁期阶段函数功能分析
用于清理一些无用的内容，如：点击事件Listener，只有一个过程：componentWillUnmount
五、常用知识点分析
- this.state
开发中组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。
举个例子：
当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 **this.render **方法，再次渲染组件。
可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值，根据diff算法算出来有差以后，就会执行ReactDom的render方法，重新渲染页面。
注意：由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
五、ES5和ES6的差异化？
es5，es6 都是对 ecmascript规范的补充，es5已经大规模使用了，es6目前可能在个别平台存在浏览器兼容性问题。
- 区别1：创建组件
组件是一个自定义的js对象，在es5中使用React.createClass()；在es6中必须继承React.component，然后进行创建。
- ES5的写法：
var Demo1 = react.createClass({//类名一定要大写开头
render(){
return(
<View style={styles.container}>
<Text>你好,朋友!</Text>
</View>
);
}
});
- ES6的写法：
class Demo2 extends Component {
render(){
return(
<View style={styles.container}>
<Text>你好,朋友!</Text>
</View>
);
}
}
- 区别2：组件的属性props
在ES6中，其为属性：defaultProps(可以标识static定义在class内，也可以定义在class外)，而在ES5中，其为方法：
getDefaultProps: function(){return {name:value}};
- ES5的写法：
var Demo3 = React.createClass({
getDefaultProps(){
return {title:'ES5的写法'}
},
propTypes: {
//属性校验器，表示必须是string
title:React.PropTypes.string
},
render: function() {
return <Text>{this.props.title}</Text>;
}
});
- ES6的写法：
class Demo4 extends Component {
//不能在组件定义的时候定义一个属性
render() {//开头花括号一定要和小括号隔一个空格，否则识别不出来
return <Text>{this.props.title}</Text>;
}
}
Demo4.propTypes: {
//属性校验器，表示必须是bool，否则报错
title:React.propTypes.bool
};
Demo4.defaultProps={title:'111'};
-
区别3：组件的状态state
- ES5的写法：
var Demo5 = React.createClass({
getInitialState(){
return {liked:false}
}
});
- ES6的写法：
class Demo6 extends component {
//构造
constructor(props) {
super(props);
//初始状态
this.state = {liked:false};
}
}
