简述
一个对象从开始生成到最后消亡所经历的状态是有一定的顺序的，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图（摘自网络）：
如图，可以把组件生命周期大致分为三个阶段：
- 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
- 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
- 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。
下面来详细讲解：
具体方法
之后会有代码示例，供参考
constructor(props, context)
构造函数，在创建组件的时候调用一次,且只调用一次。
void componentWillMount()
在组件挂载之前调用一次。
如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。这个函数在整个生命周期中只被调用一次。
void componentDidMount()
在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成这个时候，子主键也都挂载好了，可以在这里使用refs。
void componentWillReceiveProps(nextProps)
props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps。
在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。
bool shouldComponentUpdate(nextProps, nextState)
组件挂载之后，每次调用setState后或接收到新的属性都会调用来判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。
void componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。
void componentDidUpdate()
除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。
ReactElement render()
render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。记住，不要在render里面修改state。
void componentWillUnmount()
组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。
代码示例
export default class JHReactNative extends Component {
constructor(props) {
super(props);
console.log('=============constructor===========');
this.state = {};
}
// 准备加载组件，会调用
componentWillMount() {
console.log('=============componentWillMount===========');
}
//在组件第一次绘制之后会调用 ，通知组件已经加载完成
componentDidMount() {
//RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数
console.log('=============componentDidMount===========');
}
// 如果组件收到新的属性（props），就会调用
componentWillReceiveProps(nextProps) {
// 输入参数 nextProps 是即将被设置的属性，
// 旧的属性还是可以通过 this.props 来获取。
// 在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，
// 这里调用更新状态是安全的，并不会触发额外的 render() 调用
console.log('=============componentWillReceiveProps===========');
}
//当组件接收到新的属性和状态改变的话，都会触发调用
shouldComponentUpdate(nextProps, nextState) {
console.log('=============shouldComponentUpdate===========');
return true; //如果 true 表示需要更新，false则不更新，直接进入等待状态
}
// 如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，调用
// 这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中
/*** 不能使用 this.setState 来修改状态***/
componentWillUpdate(nextProps, nextState) {
console.log('=============componentWillUpdate===========');
}
//渲染界面
/*** 不能使用 this.setState 来修改状态***/
render() {
console.log('=============render===========');
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
// 调用了 render() 更新完成界面之后，会调用
componentDidUpdate() {
/*** 不能使用 this.setState 来修改状态***/
console.log('=============componentDidUpdate===========');
}
// 当组件要被从界面上移除
componentWillUnmount() {
/*** 不能使用 this.setState 来修改状态***/
console.log('=============componentWillUnmount===========');
}
}
运行结果
运行结果.png
