react 生命周期

前面学了一些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 (
        

            
姓名: {this.props.name}
            
年纪: {this.props.age}
            
当前数字: {this.state.count}
            
点击数字加1
        
    )
}

五、componentDidMount 组件出现后。

组件出现之后，既组件渲染完成以后，在这里我们可以做一些提示，可以做一些数据的缓存，做一些动画等等。

componentDidMount() {
      console.log('5- componentDidMount 组件出现后');
 }

六.整个组件渲染完成。

这个可以看作是组件的渲染，也可以看作是主程序的对组件渲染完成后的操作。为什么这么说，因为它的执行是组件渲染后在我渲染组件的夫组件中执行，当我们子组件还有它自己的子组件的时候，而当前操作是写在主组件中的话，那么，它会等待所有组件渲染完成后才会执行。

ReactDOM.render(
    ,
    document.querySelector('#app'),
    function() {
        console.log('6- 整个组件渲染完成');
    }
)

当然勒，我这里只是写了我们在编码过程中最容易遇到而且大致的react生命周期，每一个生命周期又有很细小的划分，比如updating阶段的shouldComponentUpdate方法、componentWillReceiveProps方法等，还有componentDidUpdate（）方法等。因为react一直在更新，所以它的生命周期也是一直在变动，但是不变的是它的大体方向。好了，今天分享就到这里，欢迎给出建议以及错误，代码地址：https://github.com/jiosers/react-study.git