首页
学习
活动
专区
圈层
工具
发布
技术百科首页 >React >React 的生命周期方法有哪些?在函数组件中如何替代?

React 的生命周期方法有哪些?在函数组件中如何替代?

词条归属:React

1. 类组件生命周期三个阶段

  • 挂载阶段(Mounting)constructor 初始化状态 → render 渲染 → componentDidMount 挂载完成(适合发起网络请求、绑定订阅)
  • 更新阶段(Updating)shouldComponentUpdate 决定是否重渲染 → render 重新渲染 → componentDidUpdate 更新完成
  • 卸载阶段(Unmounting)componentWillUnmount 清理定时器、取消订阅、移除事件监听

2. useEffect 对生命周期的替代方案

类组件生命周期

函数组件 Hooks 替代方案

constructor 初始化状态

useState 初始化状态

componentDidMount

useEffect 依赖数组为空 []

componentDidUpdate

useEffect 带依赖数组 [dep]

componentWillUnmount

useEffect 返回清理函数 return () => {...}

shouldComponentUpdate

React.memo 或 useMemo

3. 无法被 Hooks 替代的生命周期

  • getSnapshotBeforeUpdate:在 DOM 更新前同步读取布局信息(如滚动位置),Hooks 无法实现同等能力
  • componentDidCatch / getDerivedStateFromError:错误边界(Error Boundary)功能,React 官方明确说明仅类组件支持,Hooks 无对应 API

4. 实际开发建议

新项目应统一使用函数组件 + useEffect 模式。useEffect 的优势在于可以将"挂载时执行 + 更新时执行 + 卸载时清理"的逻辑整合在同一个函数中,避免类组件中生命周期方法分散的问题。

相关文章
React 的生命周期函数有哪些?
该生命周期函数会在组件挂载的时候触发。所谓挂载,指的是真实 DOM 元素添加到文档树上。
前端西瓜哥
2022-12-21
1.6K0
Vue组件中的生命周期钩子函数有哪些?
Vue 组件中的生命周期钩子函数可以分为三个主要阶段: 创建阶段、更新阶段和销毁阶段。
王小婷
2023-09-02
1K0
React虚拟列表在移动端的优化方法有哪些?
在移动端实现 React 虚拟列表时,需要针对移动设备的性能特点(如屏幕尺寸小、算力有限、触摸交互等)进行特殊优化。以下是关键的优化方法及实现思路:
搜罗万相
2025-08-14
3740
在 PySpark 中,如何处理数据倾斜问题?有哪些常见的优化方法?
在 PySpark 中处理数据倾斜问题是非常重要的,因为数据倾斜会导致某些任务执行时间过长,从而影响整个作业的性能。以下是一些常见的优化方法:
代码小李
2025-01-26
2.7K0
在MySQL 中优化查询时常见的优化方法有哪些
根据查询的需求,在查询字段上添加合适的索引,可以大大提高数据库的查询速度。 对于复合查询,可以创建复合索引(联合索引),它是多个字段组合形成的索引,可以更加精确地匹配查询条件。 注意选择高基数列作为索引列,因为高基数列的值分布相对均匀,可以提供更好的查询性能。 避免过多的索引,因为过多的索引会增加更新操作的成本和存储空间消耗。
jack.yang
2025-04-05
1.3K0
点击加载更多
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
领券