React 的生命周期方法有哪些?

React 16.3 之后,React 的生命周期方法经历了一些改变。以下是 React 类组件中常用的生命周期方法:

挂载阶段(Mounting):

constructor(): 构造函数,在组件被创建时调用,用于初始化 state 和绑定方法。

static getDerivedStateFromProps(): 从 props 中派生 state,在组件实例化和接收新 props 时调用。

render(): 渲染方法,返回要渲染的 React 元素。

**componentDidMount():**组件挂载后调用,通常用于发送网络请求或操作 DOM。

更新阶段(Updating):

static getDerivedStateFromProps(): 从 props 中派生 state,在接收新 props 时调用。

shouldComponentUpdate(): 决定是否重新渲染组件,在接收新 props 或 state 时调用。

render(): 渲染方法,返回要渲染的 React 元素。

getSnapshotBeforeUpdate(): 在更新 DOM 之前获取 DOM 信息,在更新之前调用。

**componentDidUpdate():**组件更新后调用,通常用于更新 DOM 或执行其他副作用。

卸载阶段(Unmounting):

componentWillUnmount(): 组件卸载前调用,通常用于清理定时器或取消网络请求。

错误处理阶段(Error Handling):

static getDerivedStateFromError(): 在子组件抛出错误时调用,用于更新 state 以渲染备用 UI。

**componentDidCatch():**在子组件抛出错误后调用,用于记录错误信息或发送错误报告。

需要注意的是,React 17 中已经废弃了一些生命周期方法,如 componentWillMount、componentWillReceiveProps 等。建议在开发时使用新的生命周期方法,以确保代码的兼容性和可维护性。

相关推荐
程序员 沐阳1 分钟前
原型链:JavaScript 世界的家族族谱
开发语言·javascript·ecmascript
We་ct16 分钟前
LeetCode 136. 只出现一次的数字:线性时间+常量空间最优解拆解
前端·算法·leetcode·typescript·位运算
HAPPY酷22 分钟前
3A游戏图形设置终极优化指南:从通用法则到实战应用
java·前端·游戏
达达爱吃肉23 分钟前
openclaw 4.2 飞书出图的bug
java·前端·数据库
lightqjx28 分钟前
【前端】前端学习二之CSS
前端·css·学习·html
IT东28 分钟前
Vue 多环境部署全解析:解决测试与生产一致性难题
前端·javascript·vue.js
of Watermelon League32 分钟前
Redis 通用命令
前端·redis·bootstrap
chxii33 分钟前
配置Nginx 的 Keepalive 提升每秒查询率(QPS)
前端·nginx
xnkyn34 分钟前
frp内网穿透https访问本地服务,frpee客户端https教程
前端·后端·网络协议·http·https
布局呆星2 小时前
Vue3 计算属性|从基础缓存到可读写
前端·javascript·vue.js