react组件生命周期

react组件周期分为三个阶段：挂载阶段、更新阶段、卸载阶段

挂载阶段：

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

1. constructor：组件被创建时，会首先调用组建的构造方法。这个构造方法接受一个props参数，props是从父组件中传入的属性对象，若父组件没有传入这个参数则props指向的是组件的默认属性。必须在这方法中首先调用super(props)才能保证props被传入组件中。constructor通常用于初始化组件的state及绑定事件等
2. componentWillMount：这方法在组件被挂载到DOM前调用且只调用一次，在项目中很少使用，因为在该方法中执行的工作都可以提前到constructor中。在这方法中调用this.setState不会引起组件的重新渲染
3. render：定义组件时唯一必要的方法。在这方法中，根据组件的props和state返回一个React元素，用于描述组件的UI。注意：render并不负责组件的实际渲染工作，只返回一个UI的描述，真正的渲染出页面工作由React自身负责。render是一个纯函数，在这方法中不能执行任何有副作用的操作，所以不能在render中调用this.setState，会改变组件状态
4. componentDidMount：在组件被挂载到DOM后调用且只调用一次。这时候已经可以获取到DOM结构，因此依赖DOM节点的操作可以放到这个方法中，这方法还会向服务器请求数据，在这个方法中调用this.setState会引起组件的渲染

更新阶段：

组件被挂载到DOM后，组件的props和state都可以引起组件更新。props引起组件更新本质上是由渲染该组件的父组件引起的，也就是当父组件的render方法被调用时，组件会发生更新过程，这时候，组件props的值可能发生改变，也可能不会发生改变，因为父组件可以使用相同的对象或值为组件的props赋值。但是，不论props是否改变，父组件render方法每一次调用都会导致组件更新。state引起组件更新是通过调用this.setState修改组件state来触发的。依次调用的生命周期方法如下：

1. componentWillReceiveProps（nextProps）：只在props引起的组件更新过程中才会被调用，state引起的组件更新不好触发改方法执行。参数nextProps是父组件传递给当前组件的新的props，nextProps的值可能和子组件当前props的值相等，因此需要比较nextProps和this.props来决定是否执行props发生变化的逻辑，如根据新的props调用this.setState触发组件的重新渲染。注意：

   （1）在componentWillReceiveProps中调用setState，只有在组件render及其之后的方法中，this.state指向的才是更新后的state。在render之前的方法shouldComponentUpdate、componentWillUpdate中，this.state依然指向的是更新前的state。

   （2）通过调用setState更新组件状态并不会触发componentWillReceiveProps的调用，否则会进入一个死循环。

2. shouldComponentUpdate（nextProps，nextState）：决定组件是否继续执行更新过程。当方法返回true（默认）时，组件会继续更新，当返回false时，组件停止更新，后续的componentWillUpdate、render、componentDidUpdate也不会调用。一般通过比较nextProps、nextState和组件当前的props、state决定这个方法的返回结果。这方法可用来减少组件不必要的渲染，从而优化组件的性能。不能调用setState，否则会引起循环调用问题。
3. componentWillUpdate（nextProps，nextState）：在组件render调用前执行，可以作为组件更新发生前执行某些工作的地方，很少使用。不能调用setState，否则会引起循环调用问题。
4. render：
5. componentDidUpdate（prevProps，prevState）：组件更新后被调用，可以作为操作更新后的DOM的地方。参数代表组件更新前的props和state。

卸载阶段：

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

1. componentWillUnmount：组件被卸载前调用，可以在该方法中执行一些清理工作，如清理组件中使用的定时器、清除componentDidMount中手动创建的DOM元素等，避免内存泄漏。

提醒：只有类组件才具有生命周期方法，函数组件是没有生命周期方法的，因此不要在函数组件中使用生命周期方法。