React 生命周期函数

前言

      生命周期函数指某一时刻组件会自动执行的函数，用来管理组件。

先来张大图便于理解各个周期函数的执行时刻：

一、constructor：           

constructor(props) {
  super(props);//此句必须在该方法首行。
}

用来构造组件的初始化，this的绑定。

二、componentWillMount ：

       1、组件刚经历constructor,初始完数据，组件将要挂载。
       2、组件还未进入render，组件还未渲染完成，dom还未渲染。

三、componentDidMount ：

       组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染。

四、componentWillReceiveProps (nextProps)：

      componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多，
      它接受一个参数nextProps。

五、shouldComponentUpdate(nextProps,nextState)：

      唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程。

      nextProps： 接下来的变化的props；nexrState: 接下来变化的state;

      在这里return 一个布尔值可以阻止或放行组件的更新。以此来提高应用效率，避免不必要的组件渲染。不然组件会去做diff比较消耗资源。

六、componentWillUpdate (nextProps,nextState)：

        shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到               nextProps和nextState。

七、render:

    当组件的数据（props或state）改变时执行此函数，此函数必须存在，不然会报错。

     render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

八、componentDidUpdate(prevProps,prevState)：

      组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

九、componentWillUnmount ：

       componentWillUnmount也是会经常用到的一个生命周期，初学者可能用到的比较少，但是用好这个确实很重要的哦，主要用来清除一些资源，比如定时器、监听事件等。

另外：

   当一个复合组件加载时，初始化时，父组件的contructor函数会先执行于子组件，然而render函数，子组件会先于父组件执行。