生命周期

未匹配的标注

简介

  • 只有类组件才有生命周期
  • 生命周期分为三个阶段: 创建时 (挂载阶段), 更新时, 卸载时
  • 创建时常用的钩子函数有 (按照执行顺序排): constructor, render, componentDidMount
  • 更新时常用的钩子函数有 (按照执行顺序排): render, componentDidUpdate
  • 卸载时常用的钩子函数有 (按照执行顺序排): componentWillUnmount

constructor

  • 组件创建时, 最先执行
  • 作用:
    1. 初始化 state
    2. 给事件绑定 this

render

  • 每次渲染组件时都会触发, 该函数贯穿了组件的创建和更新两个阶段
  • 执行的时机:
    • 当组件接收到新属性的时候会触发该方法
    • 调用 setState 方法时
    • 调用 forceUpdate (强制更新) 方法时
  • 作用:
    1. 渲染 UI
    2. 不能在 render 中 调用 setState , 因为 setState 不仅能更新状态, 也能更新 UI, 如果调用 setState 的话, 会形成无限递归调用

componentDidMount

  • 当组件挂载 (DOM 渲染完) 后执行
  • 作用:
    1. 发送网络请求
    2. 进行 DOM 操作

componecntDidIpdate

  • 当组件更新后执行
  • 作用:
    1. 发送网络请求
    2. 进行 DOM 操作
    3. 在该函数中不管是直接调用还是间接调用 setState 的时候, 需要添加上 if 条件判断, 否则会形成无限递归调用, if 条件判断一般是拿当前的 props 和更新前的 props 来做比较, 该函数中的第一个参数 prevProps 就表示更新前的 props

componentWillUnmount

  • 当组件卸载 (即从页面中消失) 的时候执行
  • 作用:
    1. 执行清理工作, 如清理定时器等

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
讨论数量: 0
发起讨论 只看当前版本


暂无话题~