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 等。建议在开发时使用新的生命周期方法,以确保代码的兼容性和可维护性。

相关推荐
全栈测试笔记13 分钟前
异步函数与异步生成器
linux·服务器·前端·数据库·python
EndingCoder30 分钟前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json
木风小助理35 分钟前
JavaStreamAPI的性能审视,优雅语法背后的隐形成本与优化实践
java·前端·数据库
Ophelia(秃头版1 小时前
JS事件循环与NodeJS事件循环(libuv)
开发语言·javascript
white-persist2 小时前
轻松抓包微信小程序:Proxifier+Burp Suite教程
前端·网络·安全·网络安全·微信小程序·小程序·notepad++
敲敲了个代码3 小时前
多标签页强提醒不重复打扰:从“弹框轰炸”到“共享待处理队列”的实战
java·前端·javascript·面试·架构
不想上班只想要钱3 小时前
动态类名在 <swiper-slide 的复制项中没有起作用的解决方法
前端·vue.js
weixin_395448913 小时前
tidl_import_mul_rmfsd_psd_u8_3x480x544_bise_raw_dynamic.txt
java·服务器·前端
多多*4 小时前
图解Redis的分布式锁的历程 从单机到集群
java·开发语言·javascript·vue.js·spring·tomcat·maven
Jinuss4 小时前
源码分析之React中updateContainerImpl方法更新容器
前端·react.js·前端框架