React 16版本的生命周期

 

1. 初始化阶段 - 自动执行

   1. constructor(props) 通过super继承父组件属性，然后赋值给this.props 定义状态 绑定事件this

   2. componentWillMount 获取属性和状态，可以发送请求，修改数据

   3. render 生成vdom 用来计算 this.props this.state 不能使用setState，是一个纯函数，必须有返回值

   4. componentDidMount 可以发送数据请求和数据修改 - 可以获取并操作真实DOM

2. 更新阶段 - 数据改变

   1. componentWillReceiveProps(nextProps) [ 属性改变才执行 ] 接收新属性， 判断组件属性是否改变，可以用于监听 this.props是旧属性, this.props != nextProps 说明数据发生改变了

   2. shouldComponentUpdate 可以优化组件性能的关键钩子函数， 控制组件是否要更新 返回值为true/false(true表示更新，false表示不更新)

   3. componentWillUpdate 表示组件即将更新 作用：为更新做准备，里面不可以执行setState

   4. render 当数据改变之后再一次生成VDOM，用于计算this.props和this.state

   5. componentDidUpdate 获得了更新后的真实dom,可以操作真实dom，可以进行第三方库的实例化，此钩子不能执行setState

3. 销毁阶段

   1. componentWillUnmount 组件销毁， 善后，比如清除计时器、滚动事件、第三方库实例化出来的实例

4. 错误处理阶段

   componentDidCatch

   1. 记录错误信息和错误栈 、

   2. 功能实现降级UI