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

相关推荐
joan_8510 小时前
input禁止自动填充
前端·elementui·vue
研☆香10 小时前
简单的复选框 全选 反选功能
javascript
林间风雨10 小时前
layui 2.9.16 版本,根据字段字数最大数,表格自适应字段宽度
前端·javascript·layui
hzb6666611 小时前
xd_day47文件上传-day55xss
javascript·学习·安全·web安全·php
木子啊11 小时前
HTML防窥技巧:让源码难以偷窥
前端·html·查看源码·禁止查看源码
梦65011 小时前
前端路由守卫:掌控页面跳转的 “守门人”
前端
jiayong2311 小时前
前端性能优化系列(二):请求优化策略
前端·性能优化
H_ZMY11 小时前
前端实现 HTTPS 强制跳转与移动端域名自动适配
前端·网络协议·https
We་ct11 小时前
LeetCode 42. 接雨水:双指针解法深度剖析与全方法汇总
前端·算法·leetcode·typescript