代码详情

声明周期方法

通过之前的学习，可以了解到ES6 类组件中的生命周期方法 constructor()和 render()
constructor() 构造函数只有在组件实例化并插入到 DOM 中的时候才会被调用。组件实例化的过程称为组件的挂载 mount
render()方法也会在组件挂载过程中被调用，同时组件更新的时候也会被调用。每当组件的状态 state 和属性 props 改变的时候，组件的 render() 方法都会被调用

挂载过程中有四个生命周期方法，调用顺序是这样的

constructor()
componentWillMount()
render()
componentDidMount()

当组件的状态或者属性改变的时候用来更新的生命周期如下五个步骤

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

组件卸载的生命周期只有一个

componentWillUnmount()

生命周期详解

constructor(props)
在组件初始化的时被调用，在这个方法中，可以设置初始化状态以及绑定类方法

componentWillMount()
在 render() 方法之前被调用，这就是为什么它可以用作去设置组件内部的状态，因为它不会触发组件的再次渲染，一般还是推荐在 constructor()中去初始化状态

componentDidMount()
仅在组件挂载后执行一次，是发起异步请求去API 获取数据的最好时期，获取到的数据将被保存在内部组件的状态中然后在 render() 生命周期方法中展示出来

componentWillReceviceProps(nextProps)
这个方法在一个更新声明周（update lifecycle）中使用， 新的属性会作为它的输入，因此可以利用 this.props 来对比之后的属性和之前的属性，基于对比的结果去实现不同的行为，此外还可以基于新的属性来设置组件的状态