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

相关推荐
Random_index2 小时前
#名词区别篇:npx pnpm npm yarn区别
前端·npm
B.-2 小时前
Remix 学习 - 路由模块(Route Module)
前端·javascript·学习·react·web
陈大爷(有低保)2 小时前
JS基础语法
开发语言·javascript·ecmascript
不修×蝙蝠3 小时前
Javascript应用(TodoList表格)
前端·javascript·css·html
加勒比海涛3 小时前
ElementUI 布局——行与列的灵活运用
前端·javascript·elementui
你不讲 wood3 小时前
postcss 插件实现移动端适配
开发语言·前端·javascript·css·vue.js·ui·postcss
前端小程4 小时前
使用vant UI实现时间段选择
前端·javascript·vue.js·ui
whyfail4 小时前
React 事件系统解析
前端·javascript·react.js
禾苗种树4 小时前
element form rules 验证数组对象属性时如何写判断规则
javascript·vue.js·elementui
liangshanbo12154 小时前
JavaScript 中的一些常见陷阱
开发语言·javascript·ecmascript