生命周期
简介#
- 只有类组件才有生命周期
- 生命周期分为三个阶段:创建时 (挂载阶段), 更新时,卸载时
- 创建时常用的钩子函数有 (按照执行顺序排):
constructor
,render
,componentDidMount
- 更新时常用的钩子函数有 (按照执行顺序排):
render
,componentDidUpdate
- 卸载时常用的钩子函数有 (按照执行顺序排):
componentWillUnmount
constructor#
- 组件创建时,最先执行
- 作用:
- 初始化 state
- 给事件绑定 this
render#
- 每次渲染组件时都会触发,该函数贯穿了组件的创建和更新两个阶段
- 执行的时机:
- 当组件接收到新属性的时候会触发该方法
- 调用
setState
方法时 - 调用
forceUpdate
(强制更新) 方法时
- 作用:
- 渲染 UI
- 不能在
render
中 调用setState
, 因为setState
不仅能更新状态,也能更新 UI, 如果调用setState
的话,会形成无限递归调用
componentDidMount#
- 当组件挂载 (DOM 渲染完) 后执行
- 作用:
- 发送网络请求
- 进行 DOM 操作
componecntDidIpdate#
- 当组件更新后执行
- 作用:
- 发送网络请求
- 进行
DOM
操作 - 在该函数中不管是直接调用还是间接调用
setState
的时候,需要添加上if
条件判断,否则会形成无限递归调用,if
条件判断一般是拿当前的props
和更新前的props
来做比较,该函数中的第一个参数prevProps
就表示更新前的props
componentWillUnmount#
- 当组件卸载 (即从页面中消失) 的时候执行
- 作用:
- 执行清理工作,如清理定时器等