当前位置：首页 > news >正文

React类组件与React Hooks写法对比

news 来源：原创 2025/9/21 17:21:33

React 类组件 vs Hooks 写法对比

分类	类组件（Class Components）	函数组件 + Hooks
组件定义	`class Component extends React.Component`	`const Component = () => {}`
状态管理	`this.state` + `this.setState()`	`useState()`
生命周期	`componentDidMount`, `componentDidUpdate`等	`useEffect(() => {}, [deps])`
副作用处理	分散在多个生命周期方法中	集中在`useEffect`中，通过依赖数组控制执行时机
上下文(Context)	`static contextType` 或 `<Context.Consumer>`	`useContext()`
Refs	`createRef()` + `this.myRef`	`useRef()`
方法绑定	需要手动绑定`this`（或在构造函数中绑定）	无需绑定，直接使用箭头函数或函数声明
代码结构	基于类的继承，逻辑分散在生命周期方法中	函数式编程，逻辑按功能聚合，可自定义Hook复用
状态更新	`this.setState({ key: value })`（自动合并对象）	`setState(newValue)`（直接替换状态，需手动合并对象）
路由(v5及以前)	通过`this.props.history`访问路由	使用`useHistory`, `useLocation`等Hooks
高阶组件(HOC)	常用HOC增强组件功能	可用HOC，但更推荐自定义Hook替代
性能优化	`PureComponent` 或 `shouldComponentUpdate`	`React.memo` + `useMemo`/`useCallback`

核心代码示例对比

1. 状态管理

// 类组件
class Counter extends React.Component {state = { count: 0 };increment = () => {this.setState({ count: this.state.count + 1 });};render() {return <button onClick={this.increment}>{this.state.count}</button>;}
}// Hooks
const Counter = () => {const [count, setCount] = useState(0);const increment = () => setCount(count + 1);return <button onClick={increment}>{count}</button>;
};

2. 生命周期/副作用

// 类组件
class DataFetcher extends React.Component {componentDidMount() {fetchData().then(data => this.setState({ data }));}componentDidUpdate(prevProps) {if (prevProps.id !== this.props.id) {fetchData(this.props.id).then(data => this.setState({ data }));}}
}// Hooks
const DataFetcher = ({ id }) => {const [data, setData] = useState(null);useEffect(() => {fetchData(id).then(setData);}, [id]); // 依赖数组控制重新执行
};

3. 上下文(Context)

// 类组件
class UserInfo extends React.Component {static contextType = UserContext;render() {const user = this.context;return <div>{user.name}</div>;}
}// Hooks
const UserInfo = () => {const user = useContext(UserContext);return <div>{user.name}</div>;
};

4. Refs

// 类组件
class InputFocuser extends React.Component {inputRef = React.createRef();focusInput = () => this.inputRef.current.focus();render() {return <input ref={this.inputRef} />;}
}// Hooks
const InputFocuser = () => {const inputRef = useRef(null);const focusInput = () => inputRef.current.focus();return <input ref={inputRef} />;
};

关键总结

类组件：面向对象风格，强依赖于this和生命周期方法，适合复杂状态逻辑或需要精确控制生命周期的场景。
Hooks：函数式编程风格，逻辑更聚合，避免this绑定问题，代码更简洁，适合逻辑复用和现代React开发。
迁移建议：新项目优先使用Hooks，旧项目逐步迁移时注意useEffect对生命周期的替代逻辑。

React类组件与React Hooks写法对比

React 类组件 vs Hooks 写法对比分类类组件（Class Components）函数组件 Hooks组件定义class Component extends React.Componentconst Component () > {}状态管理this.state this.setState()useState()生命周期componentDidMount, componentDidU…...

编程日记 2025/9/21 17:21:33

Tailwind CSS实战：快速构建定制化UI的新思路

引言在当今快节奏的前端开发环境中，开发者不断寻找能够提高效率并保持灵活性的工具。Tailwind CSS作为一个功能型优先的CSS框架，正在改变开发者构建用户界面的方式。与Bootstrap和Material UI等传统组件库不同，Tailwind不提供预设组件&…...

编程日记 2025/9/21 2:11:48

告别手动映射：在 Spring Boot 3 中优雅集成 MapStruct

在日常的后端开发中，我们经常需要在不同的对象之间进行数据转换，例如将数据库实体（Entity）转换为数据传输对象（DTO）发送给前端，或者将接收到的 DTO 转换为实体进行业务处理或持久化。手动进行这…...

编程日记 2025/9/21 17:13:07

JavaScript学习教程，从入门到精通，Ajax数据交换格式与跨域处理（26）

Ajax数据交换格式与跨域处理一、Ajax数据交换格式 1. XML (eXtensible Markup Language) XML是一种标记语言，类似于HTML但更加灵活，允许用户自定义标签。特点： 可扩展性强结构清晰数据与表现分离文件体积相对较大示例代码&#xff1…...

编程日记 2025/9/17 10:46:26

抖音IP属地跟无线网有关系吗？一文解析

在抖音等社交平台上，IP属地显示功能让许多用户感到好奇——为什么自己的位置信息有时准确，有时却显示在其他城市？这时，用户会疑惑：抖音IP属地跟无线网有关系吗？本文将详细解析‌IP属地‌和‌无线网‌的概念…...

编程日记 2025/9/8 0:30:39

RDK X3新玩法:超沉浸下棋机器人开发日记

一、项目介绍产品中文名：超沉浸式智能移动下棋机器人产品英文名：Hackathon-TTT 产品概念：本项目研发的下棋机器人，是一款能自主移动、具备语音交互并能和玩家在真实的棋盘上进行“人机博弈”的移动下棋平台，能够带给…...

编程日记 2025/9/20 22:46:58

Trae 实测：AI 助力前端开发，替代工具还远吗？

Trae 实测：AI 助力前端开发，替代工具还远吗？ 字节上线了一款 AI 新产品，名叫 Trae 。这是一款 IDE 工具，中文意思是「集成开发环境」，做技术的读者对此应该很熟悉。简单理解，就是程序员用来写代…...

编程日记 2025/9/18 23:06:41

SpringCloud基于Eureka和Feign实现一个微服务系统

Spring Cloud 是基于 Spring Boot 的 ‌微服务开发全栈解决方案‌，通过集成多种开源组件，提供分布式系统构建所需的服务治理、配置管理、容错机制‌等核心能力，简化微服务架构的复杂性。其核心目标是实现服务间的高效协同与弹性伸缩，支撑企业级云原生应用开发。Spring Clou…...

编程日记 2025/9/19 16:33:28

nacos设置权重进行负载均衡不生效

nacos设置权重进行负载均衡不生效，必须在启动类下加上这个bean Beanpublic IRule nacosRule(){return new NacosRule();}如下图所示...

编程日记 2025/8/27 2:02:41

Flowable7.x学习笔记（十四）查看部署流程Bpmn2.0-xml

前言 Flowable 在其前端 Modeler 中，采用 BPMN 2.0 标准将流程中的任务、网关、事件等元素以 XML 形式存储，并附带图形互换（Diagram Interchange，DI）数据，以保证在前端与后端都能精准重建可视化流程图。生…...

编程日记 2025/9/18 13:09:20

大模型应用中Agent2Agent(A2A)的应用场景，以及A2A与MCP的区别和适用场景

大家好，我是微学AI，今天给大家介绍一下大模型应用中Agent2Agent（A2A）的应用场景，以及A2A与MCP的区别和适用场景。文章目录一、引言二、Agent2Agent（A2A）协议原理2.1 核心架构2.2 基础框架与依…...

编程日记 2025/9/8 10:17:35

Windows server:

企鹅裙：429603659 域搭建 (细节上的问题) 1.将IP地址修改为静态IP，搭建完后设置DNS为本身(在搭建完域服务器后设置DNS) 2.配置之前需将计算机名更改为后面题目中所要求的. 3．一些版本之中比如Windows Server2012之中搭建域之后重启会显示…...

编程日记 2025/9/19 19:32:43

Python 3.14：探索新版本的魅力与革新

在Python编程语言的不断演进中，Python 3.14作为又一重要里程碑，承载着开发者们的期待与热情，悄然走进了我们的视野。尽管在撰写本文时，Python 3.14可能尚未正式成为主流版本（注：实际发布情况需根据最新信息…...

编程日记 2025/9/18 11:28:57

LabVIEW基于VI Server的控件引用操作

本 VI 通过展示控件引用（Control References）的使用，借助 VI Server 实现对前面板对象的编程操作。详细说明隐式属性节点（Implicitly Linked Property Node）：通过右键单击控件（或其控件终…...

编程日记 2025/9/12 22:25:02

【不同名字的yolo的yaml文件名是什么意思】

以下是这些 YOLO 系列配置文件的详细解析，按版本和功能分类说明： 一、YOLOv3 系列文件名核心特性适用场景yolov3.yaml原始 YOLOv3 结构，3 尺度预测（13x13,26x26,52x52）通用目标检测yolov3-spp.yaml增加 SPP&#xff…...

编程日记 2025/9/18 18:31:03

《100天精通Python——基础篇 2025 第3天：变量与数据类型全面解析，掌握Python核心语法》

目录一、Python变量的定义和使用二、Python整数类型（int）详解三、Python小数/浮点数（float）类型详解四、Python复数类型(complex)详解---了解五、Python字符串详解(包含长字符串和原始字符串)5.1 处理字符串中的引号5.2 字符串的…...

编程日记 2025/9/19 20:26:54

精益数据分析（24/126）：聚焦第一关键指标，驱动创业成功

精益数据分析（24/126）：聚焦第一关键指标，驱动创业成功在创业和数据分析的探索之旅中，我们都在不断寻找能够助力成功的关键因素。今天，我依旧带着与大家共同进步的初心，深入解读《精益数据分析…...

编程日记 2025/9/19 11:57:20

【刷题Day26】Linux命令、分段分页和中断（浅）

说下你常用的 Linux 命令？ 文件与目录操作： ls：列出当前目录的文件和子目录，常用参数如-l（详细信息）、-a（包括隐藏文件）cd：切换目录，用于在文件系统中导航m…...

编程日记 2025/9/20 20:40:45

互联网实验室的质量管控痛点质检LIMS系统在互联网企业的应用

在互联网行业流量红利消退与用户体验至上的时代背景下，产品迭代速度与质量稳定性成为企业核心竞争力的分水岭。传统测试实验室依赖人工操作、碎片化工具与线下沟通的管理模式，已难以应对敏捷开发、多端适配、数据安全等复合型挑战。一、互联网实验室的…...

编程日记 2025/9/19 7:35:38

VScode远程连接服务器（免密登录）

一、本机生成密钥对本地终端输入ssh-keygen，生成公钥（id_rsa.pub）和私钥（id_rsa） 二、在远程服务器根目录的.ssh文件夹的authorized_keys中输入id_rsa的内容三、修改vscode的config文件.ssh/config，加…...

编程日记 2025/9/21 7:23:19

【Go语言】RPC 使用指南（初学者版）

RPC（Remote Procedure Call，远程过程调用）是一种计算机通信协议，允许程序调用另一台计算机上的子程序，就像调用本地程序一样。Go 语言内置了 RPC 支持，下面我会详细介绍如何使用。一、基本概念在 Go 中&…...

编程日记 2025/9/19 23:35:44

安卓四大组件之ContentProvider

目录实现步骤代码分析 onCreate insert query ContextHolder Cursor 作用与用法基本步骤： 可能的面试题：为什么使用Cursor？ 为什么使用Cursor 使用Cursor的好处静态内部类实现单例模式 AnndroidManifest.xml配置信息注释的…...

编程日记 2025/9/16 5:55:24

C#中实现XML解析器

XML（可扩展标记语言）是一种广泛用于存储和传输数据的格式，因其具有良好的可读性和可扩展性，在许多领域都有应用。实现思路： 词法分析词法分析的目的是将输入的 XML 字符串分解为一个个的词法单元，例如…...

编程日记 2025/9/19 12:37:52

神经符号混合与跨模态对齐：Manus AI如何重构多语言手写识别的技术边界

在全球化数字浪潮下，手写识别技术长期面临"巴别塔困境"——人类书写系统的多样性（从中文象形文字到阿拉伯语连写体）与个体书写风格的随机性，构成了人工智能难以逾越的双重壁垒。传统OCR技术在处理多语言手写场景时，准确率往往不足70%，特别是在医疗处方、古代文…...

编程日记 2025/9/12 0:25:19

TestBrain开源程序是一款集使用AI(如deepseek)大模型自动生成测试用例、和测试用例评审、RAG知识库管理的web平台系统

一、软件介绍文末提供程序和源码下载 TestBrain开源程序是一款集使用AI(如deepseek)大模型自动生成测试用例、和测试用例评审、RAG知识库管理的web平台系统一个基于LLM的智能测试用例生成平台(功能慢慢丰富中，未来可能将测试相关的所有活动集成到一起)&#xff0c…...

编程日记 2025/8/23 10:27:00

软件工程效率优化：一个分层解耦与熵减驱动的系统框架

软件工程效率优化：一个分层解耦与熵减驱动的系统框架** 摘要 (Abstract) 本报告构建了一个全面、深入、分层的软件工程效率优化框架，旨在超越简单的技术罗列，从根本的价值驱动和熵减原理出发，系统性地探讨提升效率的策略与实践。…...

编程日记 2025/9/20 15:14:07

【金仓数据库征文】- 深耕国产数据库优化，筑牢用户体验新高度

目录引言一、性能优化：突破数据处理极限，提升运行效率 1.1 智能查询优化器：精准优化数据检索路径 1.2 并行处理技术：充分释放多核计算潜力 1.3 智能缓存机制：加速数据访问速度二、稳定性提升：筑牢…...

编程日记 2025/9/17 11:19:20

前端面试常见部分问题，及高阶部分问题

面试中也极有可能让你徒手写代码，无聊的面试问题o(￣︶￣)o 一、HTML/CSS 基础与进阶常见问题什么是语义化标签？有哪些常用语义化标签？答案：语义化标签是指具有明确含义的 HTML 标签，如 <header>、<footer>、<article>、<section> 等。它们有…...

编程日记 2025/9/5 13:41:03

使用 AutoGen 与 Elasticsearch

作者：来自 Elastic Jeffrey Rengifo 学习如何使用 AutoGen 为你的 agent 创建一个 Elasticsearch 工具。 Elasticsearch 拥有与行业领先的生成式 AI 工具和提供商的原生集成。查看我们的网络研讨会，了解如何超越 RAG 基础，或使用 Elastic 向量…...

编程日记 2025/9/19 17:29:12

kafka与flume的整合、spark-streaming

kafka与flume的整合前期配置完毕，开启集群需求1： 利用flume监控某目录中新生成的文件，将监控到的变更数据发送给kafka，kafka将收到的数据打印到控制台（三个node01中运行） 1.在kafka中建立topic kafka…...

编程日记 2025/9/17 17:20:36

高级电影感户外街拍人像摄影后期Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色介绍高级电影感户外街拍人像摄影后期 Lr 调色，是运用 Adobe Lightroom 软件，对户外街拍的人像照片进行后期处理，以塑造出具有电影质感的独特视觉效果。此调色过程借助 Lr 丰富的工具与功能，从色彩、光影、对比度等多维度着手…...

编程日记 2025/9/8 16:28:30

react 常用钩子 hooks 总结

文章目录 React钩子概念图状态管理钩子 state management副作用钩子 effect hooks引用钩子 Ref hooks上下文钩子其他钩子过渡钩子处理过渡效果性能优化钩子 performance hooksReact 19 新钩子 React钩子概念图状态管理钩子 state management useState useReducer useSyncEx…...

编程日记 2025/9/10 6:16:34

2025 年导游证报考条件新政策解读与应对策略

2025 年导游证报考政策有了不少新变化，这些变化会对报考者产生哪些影响？我们又该如何应对？下面就为大家详细解读新政策，并提供实用的应对策略。最引人注目的变化当属中职旅游类专业学生的报考政策。以往，中专学历报考…...

编程日记 2025/9/17 21:02:08

重置 Git 项目并清除提交历史

在某些情况下，你可能需要完全重置一个 Git 项目，清除所有提交历史，然后将当前代码作为全新的初始提交。本文将详细介绍这个过程的操作步骤和注意事项。重要警告 ⚠️ 注意：以下操作将永久删除项目的所有提交历史、分支和标签。…...

编程日记 2025/9/16 5:55:26

GitHub Copilot (Gen-AI) 很有用，但不是很好

摘要：以下是我在过去三个月中在实际、开发中使用 GitHub Copilot Pro 后的想法。由于技术发展迅速，值得注意的是，这些印象是基于我截至 2025 年 3 月的经验。 1 免费试用促使我订阅 GitHub Copilot Pro 我以前读过有关 AI 代码生成器的文…...

编程日记 2025/9/17 13:12:55

K8S Service 原理、案例

一、理论介绍 1.1、3W 法则 1、是什么？ Service 是一种为一组功能相同的 pod 提供单一不变的接入点的资源。当 Service 存在时，它的IP地址和端口不会改变。客户端通过IP地址和端口号与 Service 建立连接，这些连接会被路由到提供该 Service 的…...

编程日记 2025/9/18 2:41:27

Base64编码原理：二进制数据与文本的转换技术

🔄 Base64编码原理：二进制数据与文本的转换技术开发者的数据编码困境作为开发者，你是否曾遇到这些与Base64相关的挑战： 📊 需要在JSON中传输二进制数据，但不确定如何正确编码🖼️ 想要在HT…...

编程日记 2025/9/19 15:59:27

系统设计(1)—前端—CDN—Nginx—服务集群

简介： 本指南旨涵盖前端、CDN、Nginx 负载均衡、服务集群、Redis 缓存、消息队列、数据库设计、熔断限流降级以及系统优化等模块的核心要点。我们将介绍各模块常见的设计方案与优化策略，并结合电商秒杀、SaaS CRM 系统、支付系统等高并发场景讨论实践技巧…...

编程日记 2025/9/19 13:31:22

Easysearch 基础运维扫盲指南：从 HTTP 到 HTTPS、认证与安全访问全解析

Easysearch 基础运维扫盲指南：从 HTTP 到 HTTPS、认证与安全访问全解析众所周知，原生 Elasticsearch 默认开启的是 HTTP 明文接口，并且不开启任何身份认证或传输加密。若想启用 TLS/SSL 加密及账号密码验证，通常需要配置繁琐的安…...

编程日记 2025/9/20 6:57:31

在Android中如何使用Protobuf上传协议

在 Android 中使用 Protobuf（Protocol Buffers）主要分为以下几个步骤： ✅ 1. 添加 Protobuf 插件和依赖在项目的 build.gradle（Project 级）文件中添加 Google 的 Maven 仓库（通常默认已有）&am…...

编程日记 2025/9/16 2:51:47

【数据可视化艺术·应用篇】三维管线分析如何重构城市“生命线“管理？

在智慧城市、能源管理、工业4.0等领域的快速发展中，地下管线、工业管道、电力通信网络等“城市血管”的复杂性呈指数级增长。传统二维管理模式已难以应对跨层级、多维度、动态变化的管线管理需求。三维管线分析技术应运而生，成为破解这一难题的核心工具。…...

编程日记 2025/9/19 1:53:24

2025年的营销趋势-矩阵IP

从 2025 年的营销生态来看，创始人 IP 与智能矩阵的结合确实呈现出颠覆性趋势，这一现象背后隐藏着三个值得深度解析的商业逻辑： 一、创始人 IP 的本质是 "信任货币" 的数字化迁徙当新能源汽车市场陷入参数混战，雷军将个…...

编程日记 2025/9/18 14:31:33

对接金蝶获取接口授权代码

接口服务信息 using RestSharp; using System.Configuration; using System.Threading.Tasks; public class KingdeeAccessTokenService { private readonly RestClient _client; private readonly KingdeeApiConfig _config; public KingdeeAccessTokenService() …...

编程日记 2025/9/21 11:54:55

探秘 3D 展厅之卓越优势，解锁沉浸式体验新境界

（一）打破时空枷锁，全球触达 3D 展厅的首要优势便是打破了时空限制。在传统展厅中，观众需要亲临现场，且必须在展厅开放的特定时间内参观。而 3D 展厅依托互联网，让观众无论身处世界哪个角落，只…...

编程日记 2025/9/16 0:50:20

prometheus通过Endpoints自定义grafana的dashboard模块

1、prometheus自定义的dashboard模块文件路径/etc/prometheus/config_out/prometheus-env.yaml - job_name: serviceMonitor/monitoring/pfil/0honor_labels: falsekubernetes_sd_configs:- role: endpointsnamespaces:names:- monitoringrelabel_configs:- source_labels:- …...

编程日记 2025/9/10 9:32:36

java排序算法-计数排序

计数排序的思路计数排序的基本思路： 确定取值范围： 遍历整个待排序的数组，确定数组中元素的取值范围，找到最小值和最大值。创建计数数组： 创建一个计数数组，其长度为取值范围的大小，用于统计…...

编程日记 2025/9/18 1:36:24

力扣-hot100(滑动窗口最大值)

239. 滑动窗口最大值困难给你一个整数数组 nums，有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。返回滑动窗口中的最大值。示例 1： 输入：nums […...

编程日记 2025/9/16 1:49:24

每日c/c++题备战蓝桥杯(P1049 [NOIP 2001 普及组] 装箱问题)

洛谷P1049 装箱问题题解：动态规划在背包问题中的经典应用题目描述 P1049 装箱问题是一道典型的0-1背包问题变种。题目要求在给定箱子容量V和n个物品体积的情况下，选择若干物品装入箱子，使得箱子的剩余空间最小。最终输出这个最小剩余空间的…...

编程日记 2025/9/19 14:27:22

【尚硅谷Redis6】自用学习笔记

Redis介绍 Redis是单线程多路IO复用技术（类似黄牛买票） 默认有16个库，用select进行切换默认端口号为6379 Memcached：多线程锁（数据类型单一，不支持持久化） 五大常用数据类型 Redis key …...

编程日记 2025/9/20 18:27:00

产品更新丨谷云科技ETLCloud V3.9.2版本发布

谷云科技 ETLCloud 集成平台迎来了每月一次的功能迭代，本月发布版本号为 3.9.2 版本，为用户带来了新的功能、优化改进以及问题修复，以下是详细介绍： 新增组件本次更新新增了众多实用组件，涵盖了京东和 Shopify 相关…...

编程日记 2025/9/15 2:37:53