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

相关推荐
用户47949283569154 分钟前
React Hooks 的“天条”:为啥绝对不能写在 if 语句里?
前端·react.js
我命由我1234523 分钟前
SVG - SVG 引入(SVG 概述、SVG 基本使用、SVG 使用 CSS、SVG 使用 JavaScript、SVG 实例实操)
开发语言·前端·javascript·css·学习·ecmascript·学习方法
用户47949283569151 小时前
给客户做私有化部署,我是如何优雅搞定 NPM 依赖管理的?
前端·后端·程序员
C_心欲无痕1 小时前
vue3 - markRaw标记为非响应式对象
前端·javascript·vue.js
qingyun9891 小时前
深度优先遍历:JavaScript递归查找树形数据结构中的节点标签
前端·javascript·数据结构
胡楚昊1 小时前
NSSCTF动调题包通关
开发语言·javascript·算法
熬夜敲代码的小N2 小时前
Vue (Official)重磅更新!Vue Language Tools 3.2功能一览!
前端·javascript·vue.js
90后的晨仔2 小时前
用 Python 脚本一键重命名序列帧图片的名称
前端
辰同学ovo2 小时前
Vue 2 路由指南:从入门到实战优化
前端·vue.js
小彭努力中2 小时前
1.在 Vue 3 中使用 Cesium 快速展示三维地球
前端·javascript·vue.js·#地图开发·#cesium·#vue3