React 组件的生命周期

目录

组建的生命周期概述

生命周期的三个阶段

1. 创建时 ( 挂载阶段 )

2. 更新时 ( 更新阶段 )

3. 卸载时 ( 卸载阶段 )

---

组建的生命周期概述

• 意义: 组件的生命周期有助于理解组件的运行方式 , 完成更复杂的组件功能 , 分析组件错误原因等
• 组件的生命周期: 组件从被创建到挂载到页面中运行 , 再到组件不用时卸载的过程
• 生命周期的每个阶段总是伴随着一些方法调用 , 这些方法就是生命周期的钩子函数
• 钩子函数的作用: 为开发人员在不同阶段操作组件提供了时机
• 只有 类组件 才有生命周期

 

生命周期的三个阶段

1. 每个阶段的执行时机
2. 每个阶段钩子函数的执行顺序
3. 每个阶段钩子函数的作用

1. 创建时 ( 挂载阶段 )

• 执行时机: 组件创建时 ( 页面加载时 )
  • 执行顺序

执行顺序

 

钩子函数	触发时机	作用
constructor	创建组件 , 最先执行	初始化 state 为事件处理程序绑定this
render	每次组件渲染都会触发	渲染 UI (注意: 不能调用 setState() )
componentDidMount	组件挂载( 完成DOM渲染 ) 后	发送网络请求 完成DOM操作 如果要setState() 必须放在一个if条件中

2. 更新时 ( 更新阶段 )

执行时机:

1. setState() 
2. forceUpdate()
3. 组件接收到新的props

钩子函数	触发时机	作用
render	每次渲染组件都会触发	渲染UI(与 挂载阶段是同一个render )
componentDidUpdate	组件更新 ( 完成DOM渲染 ) 后	发送网络请求 DOM操作 如果要setState() 必须放在一个if条件中

3. 卸载时 ( 卸载阶段 )

• 执行时机: 组件从页面消失

钩子函数	触发时机	作用
componentWillUnmount	组件卸载 ( 从页面中消失 )	执行清理工作( 比如: 清理定时器 )