目录
组建的生命周期概述
- 意义: 组件的生命周期有助于理解组件的运行方式 , 完成更复杂的组件功能 , 分析组件错误原因等
- 组件的生命周期: 组件从被创建到挂载到页面中运行 , 再到组件不用时卸载的过程
- 生命周期的每个阶段总是伴随着一些方法调用 , 这些方法就是生命周期的钩子函数
- 钩子函数的作用: 为开发人员在不同阶段操作组件提供了时机
- 只有 类组件 才有生命周期
生命周期的三个阶段
- 每个阶段的执行时机
- 每个阶段钩子函数的执行顺序
- 每个阶段钩子函数的作用
1. 创建时 ( 挂载阶段 )
- 执行时机: 组件创建时 ( 页面加载时 )
- 执行顺序
![](https://i-blog.csdnimg.cn/blog_migrate/38ed42bb5a4824b01e6419f5c30469c9.png)
钩子函数 | 触发时机 | 作用 |
---|---|---|
constructor | 创建组件 , 最先执行 |
|
render | 每次组件渲染都会触发 | 渲染 UI (注意: 不能调用 setState() ) |
componentDidMount | 组件挂载( 完成DOM渲染 ) 后 |
|
2. 更新时 ( 更新阶段 )
执行时机:
- setState()
- forceUpdate()
- 组件接收到新的props
钩子函数 | 触发时机 | 作用 |
---|---|---|
render | 每次渲染组件都会触发 | 渲染UI(与 挂载阶段是同一个render ) |
componentDidUpdate | 组件更新 ( 完成DOM渲染 ) 后 |
|
3. 卸载时 ( 卸载阶段 )
- 执行时机: 组件从页面消失
钩子函数 | 触发时机 | 作用 |
componentWillUnmount | 组件卸载 ( 从页面中消失 ) | 执行清理工作( 比如: 清理定时器 ) |