react组件的生命周期的介绍以及适用场景

1.什么是组件的生命周期，能干什么？

     组件从被创建到被销毁的过程就叫做组件的生命周期。

      react为组件在不同的生命周期阶段提供不同的生命周期方法，让开发者可以在组件的生命周期过程中更好地控制组件的行为。

2.react生命周期函数有哪些，什么时候使用？

      组件的生命周期主要分为三个阶段：挂载、更新、卸载。

     下图为生命周期流程图，在流程图中可以很清晰地看到一个组件的从创建到卸载的过程中所使用到的生命周期函数。

下面是对各个生命周期函数的详细介绍 ：

    1）挂载阶段（mounting）

       在这个阶段组件被创建，执行初始化，并被挂载到DOM中，完成第一次渲染。依次执行的生命周期方法有：

       ① constructor（16.0版本）、[getDefaultProps,getInitialState]（15.0版本）

        constructor()是ES6的构造方法，在组件被创建时，首先会调用组件的构造方法用于组件的state初始化以及绑定事                 件处理方法等工作。在实现构造方法的时候必须首先调用super(props)才能保证props【从父组件中传入的属性对象】被             传入组件中。如果父组件中没有传入属性，而组件中定义了默认属性，那么这个props指向的就是组件的默认属性。

        注意： 

        如果组件的创建使用的是es5的写法，则在初始化state和设置prop默认属性时使用的一下两个方法： getDefaultProps()方法被调用一次并缓存起来；这个方法返回一个对象并且属性如果没有通过父组件传入的话相应的属性，会挂载到this.props对象上；getInitialState()方法也只会被调用一次；返回值将会被当成this.state的初始值；

       ② componentWillMount

      在组件挂载到DOM前会调用这个方法，并在整个生命周期只会调用一次。在这个方法中调用this.setState不会引起组件          的重新渲染，因为页面这是还未挂载到DOM上，只会改变对应的属性的值。

      注意：

一般不会在这个方法中setState，因为在这个方法中setState仅会更新state一次，而且会和constructor里的初始化state合并进行，因此是无意义的。建议在componentWillMount中要进行setState的变量，构造函数都可以直接初始化。

此外，在componentWillMount中进行组件通信是比较常见的一种方式。（因为在此函数中组件还没挂载，在此进行服务器通信，可以为数据在组件挂载前返回组件多争取一点时间）

      ③ render

       render()是定义组件时唯一必要的方法。它并不负责组件的实际渲染工作，真正的渲染出页面的DOM的工作由react自身负责。它只是根据组件的state和prop返回一个react元素，用于描述UI。

     注意：

     render是一个纯函数，在这个方法中不能执行任何有副作用的操作，所以不能在render中调用this.setState，这会改变组件的状态，从而使得组件一直陷入render和setState的死循环中。

     ④ componentDidMount

     当组件被挂载到DOM后会调用这个方法，并且只会调用一次。在这个方法中调用this.setState会引起组件的重新渲染，但由于此方法在整个生命周期就只执行一次，所以setstate之后并不会进入死循环，但应该尽量避免在此方法中改变组件的状态。

     使用场景：DOM节点操作；用于向服务器请求数据；

 扩展：

 在componentWillMount和componentDidMount中进行服务器通信是比较常见的，但componentDidMount是执行组件与服务器通信的最佳地方。原因主要有两个：

  a. 在componentDidMount中可以保证获取到返回数据时，组件已经处于挂载的状态了，这时的DOM操作是安全的，而componentWillMount无法保证这一点。

  b. 当组件在服务器端渲染时，componentWillMount会被调用两次，一次是在服务器端，一次是在浏览器端，而componentDidMount能保证在任何情况下就只会被调用一次，从而不会发送多余的数据请求。

    2）更新阶段（updating）

        组件被挂载到DOM以后，组件的props或state可以引起组件更新。props引起的组件更新实质上是父组件的render方法的  每次调用引起的；state引起的组件更新，是通过调用this.setState修改组件的state来触发的。组件的更新阶段依次调用的生命周期方法有：

           ① componentWillReceiveProps（nextProps）

       此方法只有在props发生变化才会引起组件的更新。调用this.setState并不会引起组件的的重新渲染，否则会进入在当前方法中进入死循环。参数nextProps指的是父组件传递给当前组件的新的props。通常可以利用这个参数当前组件的props是否发生变化决定是否重新渲染组件。

注意：

    组件更新阶段常常需要再次与服务器通信，获取服务器上最新的数据。而componentWillReceiveProps中恰好可以通过判断组件中某个作为入参的属性值是否发生改变来判断是否重新向服务器发送请求，获取数据。

           ② shouldComponentUpdate（nextProps，nextState）

      此方法决定组件是否继续执行更新过程，默认返回true（会更新），返回false时，组件的更新过程会停止。（可以通过在此方法中判断组件状态有没有改变，从而优化组件的性能，减少不必要的渲染）

           ③ componentWillUpdate

     此方法在组件更新前调用，可以作为组件更新前执行某些工作的地方。

注意：

不能在shouldComponentUpdate、componentWillUpdate中使用this.setState，否则进入当前函数的死循环，render永远无法被调用到，组件无法进行正常的渲染。

           ④ render

           ⑤ componentDidUpdate（prevProps,prevState）

     此方法在组件更新后调用，可以作为操作更新后的Dom的地方。prevProps和prevState这两个参数代表的是组件更新前的props和state

     在此方法中调用this.setState同样触发组件重新渲染，从而进入死循环。如果必须在这个方法中调用this.setState，那么要设置一个前提条件，避免渲染进入死循环。    

    3）卸载阶段（unmounting）

        组件从DOM中被卸载的过程，这个过程只有一个生命周期方法：

        ① componentWillUnmount

        这个方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清除组件中使用的定时器，清除componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

总结：this.setState的使用时机如下：

是否可执行	生命周期函数
可以执行	componentWillReceiveProps
尽量避免	componentDidMount、componentDidUpdate
无意义	compontWillMount、componentWillUnmount
禁止	shouldComponentUpdate、componentWillUpdate