react 类组件 和 函数组件 声明周期 对比

React 的类组件和函数组件在生命周期方面存在一些差异。以下是它们之间的对比:

类组件的生命周期

React 类组件的生命周期可以分为三个阶段:挂载、更新和卸载。

1、挂载阶段:

constructor():组件实例化时调用,用于初始化状态和绑定方法。

componentWillMount()(已弃用):在组件挂载前调用,但在React 17.0之后,该钩子已被废弃。

render():渲染组件的UI。

componentDidMount():组件挂载后调用,可以进行 DOM 操作或发起数据请求。

2、更新阶段:

shouldComponentUpdate():在组件更新前调用,返回一个布尔值,决定是否进行更新。

componentWillUpdate()(已弃用):在组件更新前调用,但在React 17.0之后,该钩子已被废弃。

render():重新渲染组件的UI。

getSnapshotBeforeUpdate():在 DOM 更新前被调用,可用于获取某些 DOM 的值(如滚动位置)。

componentDidUpdate():组件更新后调用,用于处理更新前后的状态差异。

3、卸载阶段:

componentWillUnmount():组件即将被卸载时调用,用于清理定时器或取消订阅等操作。

函数组件的生命周期

React 函数组件没有传统的生命周期方法,但在 React Hooks 的引入后,函数组件可以模拟类组件的生命周期。

1、初始化阶段:

useState():用于在函数组件中添加状态。这类似于类组件的 state。

useEffect():用于处理副作用,如 DOM 操作或数据请求。在首次渲染后和更新后都会调用,这类似于类组件的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

2、更新阶段:

useEffect():当组件的 props 或 state 发生变化时,会重新运行 useEffect 中的函数。

3、卸载阶段:

useEffect():在组件卸载前,可以通过在 useEffect 的清理函数中执行必要的清理操作(如清除定时器或取消订阅),来模拟 componentWillUnmount 的行为。

学习建议:

深入了解类组件和函数组件的基础概念和用法。

学习并理解类组件的生命周期方法及其用途。

学习 React Hooks,特别是 useState 和 useEffect,并理解它们如何模拟函数组件的生命周期。

通过编写实际项目中的组件来实践这些概念,以加深理解。

查阅官方文档和社区资源,以获取更多关于 React 生命周期和 Hooks 的信息

相关推荐
尘世中一位迷途小书童4 分钟前
我为什么在 Windows 上做了一个翻译软件:SnapLingo
前端·人工智能·机器学习
志尊宝8 分钟前
Vue3 零基础每日笔记(029):插槽 slot 三连——默认、具名、作用域一次讲透
前端·javascript·vue.js·vue·前端开发
aixingpan11 分钟前
aixingpan.cn API开发文档:api_docs_bichart_natalvstertiary2接口指南
前端·php
铁皮饭盒21 分钟前
网页端, 40mb离线模型, 自动抠图, 不用 Python,不用服务器,不用 API Key, 不用显卡
前端·javascript·后端
梦曦i22 分钟前
修复 .uvue 页面路径残留问题
前端·vite
nicole bai26 分钟前
vue前端全局图标闪一下的问题
前端·vue.js
ly768927 分钟前
磁盘 I/O 延迟突增:用 iostat、blktrace 与火焰图定位到具体调用栈
java·linux·前端·数据库·iostat·磁盘 i/o·blktrace
IT_陈寒34 分钟前
Redis并发写入踩坑记录:别让超时设置坑了你
前端·人工智能·后端
晨枫阳34 分钟前
Client authentication(客户端授权)开关与OAuth2 PKCE的深刻理解
前端·安全
福兮说35 分钟前
在浏览器里写一个“够用就好“的 Excel 公式求值器
前端·javascript·excel·编译原理