再一次深刻了解react的生命周期

1、原由
记得在2017年4月，曾经在本身的博客中写过一篇react-lifeCycle，有兴趣的朋友能够回顾下！现在到如今react的版本已经发生了太多的变化，因此又再一次从新认识一下生命周期

借用官网的一张图

从上图中能够大概的看出整个生命周期的组成和构成以及运行的顺序，掌握这些对于react代码的书写有很重要的做用，好比什么时候更新，什么时候销毁，什么时候注意性能等等一系列的问题，下面要说的就是举例说明了；
如今书写组建基本上都是使用ES6的方法或者是stateless的方法，这里用ES6方法来说：
一、static defaultProps = {} - 初始化props的地方
二、static propTypes = {} - 检测或要求props类型的地方

有的将此属性书写在组建外部，之前这个检测的方法是在react点下，现在已经将这一部分移除来成为了一个单独的插件prop-types

三、构造方法

constructor(props){
    super(props)
    this.state = {}
}
构造方法自己其实就是构造函数的自己，在ES5中是没有继承的写法的，所以经过prototype来达到目的,例如
    //构造函数People
   function People (name,age){
        this.name = name;
        this.age = age
    }
    People.prototype.sayName = function(){
        return '个人名字是：'+this.name;
    }
    let p1 = new People('harrisking',23);
    console.log(p1.sayName()) //个人名字是：harrisking
在ES6中能够这样来实现
    class People{
        //构造方法constructor就等于上面的构造函数People
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sayName(){
            return '个人名字是：'+this.name;
        }
    }
    //建立新的子类p1
    let p1 = new People('harrisking',23);
    console.log(p1.sayName()) 
上面两种是同样的
而super()是用来继承父类的this的对象，若是不写就会得不到this，那么在构造函数中书写this.state就会报错。
有些人会在构造函数中书写绑定事件到this上，以下
this.handle = this.handle.bind(this),这在方法中是没有写箭头函数或者避免在d标签中绑定this（<div onClick={this.handle.bind(this)} ></div>）
若是要在其中使用this.props就必需要在构造函数中加参数props

固然你也能够不写这个构造函数，在render中是有this的，这个是react自带的

四、componentWillMount
五、render
六、componentDidMount
至此初始化时应该用到的周期就是这些；

2、周期举例
运行时周期的顺序以例子来说明：
父组建IndexPage 子组建Son

直接来看浏览器的运行结果

初始化阶段的顺序为will --- render ---- Mount遇到子组建先执行子在执行父

当咱们点击Welcome to Here的时候周期顺序如图

在父组建中调用setState后就会走render周期，子组建就会接收新的props进入componentWillReceiveProps周期，而后决定是否进行更新子组建周期shouldComponentUpdate,返回true则更新，返回false不跟新，这里通常用于优化做用，当返回true时进入即将更新阶段componentWillUpdate阶段而后render，最后进入更新后阶段componentDidUpdate
(

shouldComponentUpdate周期用于优化react项目的性能，能够选择更新或不更新，官网也推出了react的另一个属性PureComponent,
即class Son extent React.PureComponent，用这个属性来代替手写shouldComponentUpdate, 可是它只是对属性进行浅比较，若是属性的层级太深就只能进行手动了

)

当咱们点击Son组建中的button的时候，看看内部周期是怎样的顺序

周期仍然于更新同样，这里不在赘述了

3、卸载周期 componentWillUnmount
常在此周期中进行定时器的销毁，或者引用外部对象的销毁（destroy）;

每次熟悉一遍就有一遍的收获！学以至用，知情分享！乐在其中！