组件的生命周期

概念：

    1、在组件创建、加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期。

    2、组件生命周期的阶段：

         - 组件的创建阶段

特点是：创建阶段的生命周期函数在组件中，一生只执行一次。

》 componentWillMount: 
      1、在组件即将挂载到页面上的时候，此时组件没有挂载到页面;
      2、虚拟DOM还没有开始创建;此阶段不能操作DOM；
      3、该钩子函数相当于vue中的created钩子函数
》 render: 
    1、将要开始渲染内存中的虚拟DOM，当这个函数执行完了只有，内存中
         就有了一个渲染好的虚拟DOM，但是页面上尚未真正显示DOM元素；
    2、在return 之前，虚拟DOM还没有开始创建，页面上也是空的，根本拿
         不到任何元素；
    3、当return执行完毕后，虚拟DOM已经创建好了，但是还没有挂载到真正
         的页面中
》 componentDidMount: 
   1、当组件挂载到页面上之后，会进入到这个生命周期函数，只要进入这个
         生命周期函数，必然说明页面上已经有可见的DOM元素了；
   2、在这个函数中，我们可以放心的去操作页面上需要使用的DOM元素了，
         所以如果我们想操作DOM元素，最早只能在componentDidMount中进行；
   3、componentDidMount相当于vue中的mounted函数

         - 组件的运行阶段

特点是：根据组件的state和props的改变，有选择性的触发0次或多次。

》 componentWillReceiveProps: 
         1、组件将要接收外界传递过来的新的props属性值
         2、当子组件第一次被渲染到页面上的时候，不会触发这个函数
         3、只有当父组件中，通过某些事件修改了传递给子组件的props数据之后，才会触发这个函数
         4、在componentWillReceiveProps被触发的时候，如果我们使用this.props来获取属性值，此时不是最新的，是上一次旧的属性值；如果想要获取最                新的属性值，需要通过componentWillReceiveProps参数列表来获取
》 shouldComponentUpdate: 
      1、组件是否需要被更新，此时组将尚未被更新，但是state和props肯定是最新的
          2、在该钩子函数中要求必须返回一个布尔值，若返回false，则不会继续执行后续的生命周期函数，而是直接退回到了运行中的状态，此时后续的                         render函数并 没有被执行，因此页面不回被更新，但是组建的state状态却被修改了
》 componentWillUpdate: 
          1、组件将要更新，此时尚未更新，在进入这个生命周期函数的时候，内存中的虚拟DOM是旧的，页面上的DOM元素也是旧的
          2、此时页面上的DOM节点，都是旧的，应该慎重操作，因为可能操作的是旧DOM
》 render: 此时又要重新根据新的state和props重新渲染一颗内存中的虚拟DOM树，当render调用完毕，内存中的旧DOM树已经被新DOM树替换了，此时页面还是旧的。
》 componentDidUpdate: 此时页面又被重新渲染了，state和虚拟DOM和页面已经完全保持同步了

         - 组件的销毁阶段

特点是：一生只执行一次。

》 componentWillUnmount: 组建将要被卸载，此时组建还可以正常使用 

 

组件生命周期的执行顺序：

 Mounting：
     constructor()
     componentWillMount()
     render()
     componentDidMount()
 Updating：
     componentWillReceiveProps(nextProps)
     shouldComponentUpdate(nextProps, nextState)
     componentWillUpdate(nextProps, nextState)
     render()
     componentDidUpdate(prevProps, prevState)
 Unmounting：
     componentWillUnmount()