前面学了一些react项目基础，因为赶项目，所以学习分享就没有继续了。刚好最近公司有react项目需要自己来完成新的需求，自己也想重新温习一遍react，在这里分享一下react生命周期的学习。当然，react学习还有很多，比如它的jsx原理、props、state状态管理等，这里就不多说了，今天我们主要讲react的生命周期。
react大家都知道，目前前端市场上最流行的几大前端框架之一，一个采用声明式，高效而且灵活的用来构建用户界面的框架。而其中最关键的就是生命周期。顾名思义，也就是一个东西从诞生死亡中间发生的过程。比如我们人，可以分为幼年、少年、中年、老年等等，同样的，程序也可以有自己的生命周期。一个项目有生命周期，而一个项目的某个功能也有自己的生命周期。react整个项目可以看成一个生命，而每个项目的组件又可一戏份一个生命，而每个生命都有自己的生命周期，而react组件的生命周期，可以大致分为以下三个状态：
1. Mounting：已插入真实 DOM
2.Updating：正在被重新渲染
3.Unmounting：已移出真实 DOM
同时也可以细分为以下六个状态：
1.设置默认的props属性。
2.设置状态机, 既初始化state对象。
3.componentWillMount 组件出现之前。
4.render 渲染。
5.componentDidMount 组件出现后。
6.整个组件渲染完成。
我们下面一步一步看这六个执行
一、设置默认的props属性。
当我们还使用es5的时候，有一个getDafaultProps属性代码，而到了最新版本的es6 class类以后，就抛弃了老版本的写法，而是通过以下代码实现：
static defaultProps = {
name: 'june',
age: 18
}
将其设置为一个静态属性。
二、设置状态机, 既初始化state对象
当然，设置状态机既设置我们状态管理的state数据，同样，以前es5的时候有它自己的函数设置，代码如下：
getInitialState: function() {
console.log('2- getInitialState 设置状态机, 既初始化state对象');
return ({
count: 0
});
}
同样在es6语法中就变得简单，直接在执行constructor构造函数的时候，就已经初始化了state数据，代码如下：
constructor(props) {
super(props);
this.state = {count: 0};
this.addCount = this.addCount.bind(this);
}
三、componentWillMount 组件出现之前。
顾名思义，组件将要初始化之前，也就是组件出现之前，在这里面，我们可以执行ajax数据的请求，可以对一些数据进行改变各种什么的。实现代码如下：
componentWillMount() {
console.log('3- componentWillMount 组件出现之前');
}
四、render 渲染。
render渲染，想必在学react的童鞋都应该知道，既程序把我们想要的组件渲染出来。话不多说，看代码：
render() {
console.log('4- render 渲染');
return (
<div>
<p>姓名: {this.props.name}</p>
<p>年纪: {this.props.age}</p>
<p>当前数字: {this.state.count}</p>
<p><button onClick={this.addCount} >点击数字加1</button></p>
</div>
)
}
五、componentDidMount 组件出现后。
组件出现之后，既组件渲染完成以后，在这里我们可以做一些提示，可以做一些数据的缓存，做一些动画等等。
componentDidMount() {
console.log('5- componentDidMount 组件出现后');
}
六.整个组件渲染完成。
这个可以看作是组件的渲染，也可以看作是主程序的对组件渲染完成后的操作。为什么这么说，因为它的执行是组件渲染后在我渲染组件的夫组件中执行，当我们子组件还有它自己的子组件的时候，而当前操作是写在主组件中的话，那么，它会等待所有组件渲染完成后才会执行。
ReactDOM.render(
<HelloReact name='jiosers'/>,
document.querySelector('#app'),
function() {
console.log('6- 整个组件渲染完成');
}
)
当然勒，我这里只是写了我们在编码过程中最容易遇到而且大致的react生命周期，每一个生命周期又有很细小的划分，比如updating阶段的shouldComponentUpdate方法、componentWillReceiveProps方法等，还有componentDidUpdate（）方法等。因为react一直在更新，所以它的生命周期也是一直在变动，但是不变的是它的大体方向。好了，今天分享就到这里，欢迎给出建议以及错误，代码地址：https://github.com/jiosers/react-study.git
