三、组件的生命周期
只有类组件才有生命周期，函数组件没有生命周期
1，挂载阶段
被创建，执行初始化，并被挂载到dom，完成第一次渲染。依次调用：
constructor
- 是es6 class的构造方法。接收一个props参数，props是从父组件传入的属性对象，如果父组件没有传入而组件自身定义了默认属性，那么props指向组件的默认属性。constructor通常用于初始化组件的state以及绑定事件处理方法等工作。
componentWillMount
- 在组件被挂载到DOM前调用，且只会调用一次，在该方法中执行的工作都可以提前到constructor，在这个方法中调用this.setState不会引起组件的重新渲染。
render
- 这是定义组件唯一必要的方法。根据props和state返回一个React元素，用于描述UI。render并不负责组件的实际渲染工作，真正的渲染是React自身负责。render是一个纯函数，在这个方法中不能执行任何有副作用的操作，例如：不能调用this.setState。
componentDidMount
- 在组件被挂载到DOM前调用，且只会调用一次。这时候可以获取到DOM结构。这个方法通常还用于向服务器请求数据。在这个方法中调用this.setState会引起组件的重新渲染。
2，更新阶段
props或state可以引起组件更新。
- props引起的组件更新本质上是由渲染该组件的父组件引起的，当父组件的render被调用，组件会发生更新。无论props是否改变，父组件render方法每一次调用都会导致组件更新。
- state引起的组件更新是通过调用this.setState修改组件state触发的。
此阶段依次调用：
componentWillReceiveProps(nextProps)
- 只在props引起的组件更新过程中才会被调用，state引起的组件更新不会触发。nextProps是父组件传递给当前组件的新的props，但是父组件传递给子组件的props可能没有变化，因此需要比较nextProps和this.props来决定是否执行后续逻辑。
- this.state指向更新前的state。
shouldComponentUpdate(nextProps,nextState)
- 该方法返回true，组件继续更新；返回false，组件停止更新。一般通过比较nextProps、nextState和当前的props、state来决定返回结果，默认返回true。
- 该方法可以用来减少组件不必要的渲染，优化组件性能。
- this.state指向更新前的state
- 不能在该方法中调用setState，否则会引起循环调用的问题。
componentWillUpdate(nextProps,nextState)
- 作为组件更新发生前执行某些工作的地方，一般很少用。
- this.state指向更新前的state。
- 不能在该方法中调用setState，否则会引起循环调用的问题。
render
- this.state指向更新后的state。
componentDidUpdate(prevProps、prevState)
- 组件更新后被调用，可以作为操作更新后的DOM的地方。这个方法的两个参数prevProps、prevState代表组件更新前的props和state。
- this.state指向更新后的state。
3，卸载阶段
componentWillUnmount
- 在卸载前调用，可以在这里执行一些清理工作，比如定时器、componentDidMount中手动创建的DOM元素等。
