组件从创建到销毁的过程 ,在不同的阶段会有对应的钩子函数 只有类组件才存在生命周期

三个阶段

创建阶段

组件创建时执行 (页面加载中)

  1. // 按执行顺序排列
  2. constructor()   // 初始化state 处理this的指向
  4. render() // 贯穿创建和更新两个阶段  组件渲染内容就会触发 作用渲染UI 不能在这里调用setState方法
  6. componentDidMount() // 完成DOM渲染   发送请求    DOM操作

更新阶段

页面更新时执行

  1. render()  // 更新
  3. componentDidUpdate() // 完成更新时 发送请求 DOM操作 在此函数中执行 setState()需要条件 否则死循环
  4. // 参数  prevProps 上一次的props
  6. // 更新条件
  7. // 1: new props 组件接收到新的属性的时候
  8. // 2: 调用setState()
  9. // 3: 调用forceUpdate()   // 强制更新

卸载阶段

组件在页面中消失时执行

  1. componentWillUnmout()  // 执行清理工作  如清除定时器

其它钩子函数 完整生命周期

image.png