组件的生命周期

生命周期概述

•     一个组件在创建到销毁的这一系列过程中产生的一些钩子函数(创建-修改-销毁)
•     只有在类组件中才会有生命周期的概念
•     在生命周期函数的每个阶段都会产生一些方法，供你使用，这些方法就是生命周期钩子函数
•     帮助我们去完成一些复杂的组件功能、利用周期钩子函数去分析项目中的一些问题

生命周期的三个阶段

创建时的三个钩子函数
1.constructor()
    创建组件时，最先执行
    初始化state
    为事件处理程序绑定this
    这里获取不到该组件创建的dom
2.render()
    每次组件渲染触发
    渲染UI
    不用调用setState()
3.componentDidMount()
    组件渲染（挂载）后触发
    发送网络请求
    在这里可以进行Dom操作

2更新时（更新阶段)
∶引起组件重新渲染变化，:1.setState（） 2.forceUpdate( ）3.组件接收到新的props说明
钩子函数执行顺序∶
render（) --> componentDidUpdate()

1.render()

•     每次组件渲染触发
•     渲染UI
•     不用调用setState()

2.componentDidUpdate()

•     当状态被修改后触发
•     发送网络请求
•     在这里可以进行Dom操作
•     可以使用setState()，但是需要给它加上if()
    // 注意：如果要调用 setState() 更新状态，必须要放在一个 if 条件中
    // 因为：如果直接调用 setState() 更新状态，也会导致递归更新！！！

  componentDidUpdate(prevProps) {
    console.warn('--子组件--生命周期钩子函数： componentDidUpdate')
    // 正确做法：
    // 做法：比较更新前后的props是否相同，来决定是否重新渲染组件
    console.log('上一次的props：', prevProps, ', 当前的props：', this.props)
    if (prevProps.count !== this.props.count) {
      // this.setState({})
      // 发送ajax请求的代码
    }

    // 错误演示！！！
    // this.setState({})

    // 获取DOM
    // const title = document.getElementById('title')
    // console.log(title.innerHTML)
  }

3.销毁时

1.     当组件从页面消失时触发
2.     1.componentWillUnmount       组件卸载    当组件卸载时，,执行清理工作