函数组件、Hooks和类组件区别

 1. 函数组件(Function Components)

函数组件是接收props并返回React元素的纯JavaScript函数。它们不能拥有自己的状态(state)或生命周期方法,但在React 16.8中引入Hooks之后,这种情况发生了变化。

特点

  • 声明式地编写。
  • 不需要类,减少了样板代码。
  • 没有this关键字的问题。
  • 在组件渲染时调用,每次组件更新时都会重新调用。

例子

 使用Hooks和函数组件 

import React from 'react'
import { withTranslation } from 'react-i18next'
import { Modal } from 'antd'import SvgIcon from '@/components/SvgIcon'//考试进行中弹框组件
function ExamOnGoingModal(props) {const { t, visible, onOk, onCancel } = propsreturn (<Modaltitle={<><SvgIcon iconClass="icon-jingshidanchuang" color='#007AFF' size="20px" /><span style={{ paddingLeft: '16px' }}>{t('examination.examOnGoing')}</span></>}visible={visible}onOk={onOk}onCancel={onCancel}okText={t('setting.refresh')}cancelText={t('common.close')}><p>{t('examination.examOnGoingTip')}</p></Modal>)
}export default withTranslation()(ExamOnGoingModal)
//使用 withTranslation() 高阶组件包装 ExamOnGoingModal,以便将 t 函数注入到其 props 中

2. Hooks(Hooks API)

Hooks是React 16.8中引入的一个新特性,允许你在不编写类的情况下使用状态(state)和其他React特性。Hooks只能在函数组件内部使用。

特点

  • 让你在不编写类的情况下使用状态和其他React特性。
  • 完全可选的。你仍然可以在项目中混合使用类和函数组件。
  • 允许你复用状态逻辑,而无需更改组件结构。

常用Hooks

  • useState:在函数组件中添加状态。
  • useEffect:在函数组件中执行副作用操作(如数据获取、订阅或手动更改React组件中的DOM)。
  • useContext:让你在函数组件中订阅React的Context。

例子

...
import { useTranslation } from 'react-i18next';  function ExamOnGoingModal({ visible, onOk, onCancel }) {  // 使用useTranslation Hook获取t函数  const { t } = useTranslation();  return (  <Modal  //同函数组件</Modal>  );  
}  export default ExamOnGoingModal;  
//这里不再需要withTranslation()来包装组件,因为我们已经直接在组件内部使用了useTranslation Hook


3. 类组件(Class Components)

类组件是通过继承React.Component来创建的React组件。它们有自己的状态(state)和生命周期方法,并且通常比函数组件更复杂。

特点

  • 可以包含自己的状态(state)和生命周期方法。
  • 适用于更复杂的场景,如需要使用Refs、获取DOM元素、手动调用组件的方法等。
  • 需要this关键字来访问组件的属性和方法。

例子

class ExamOnGoingModal extends React.Component {handleOk = () => {this.props.onOk()}handleCancel = () => {this.props.onCancel()}render() {const { t, visible } = this.propsreturn (<Modal...visible={visible}onOk={this.handleOk}onCancel={this.handleCancel}okText={t('setting.refresh')}cancelText={t('common.close')}><p>{t('examination.examOnGoingTip')}</p></Modal>)}
}
export default withTranslation()(ExamOnGoingModal)


总结

  • 函数组件简单且易于理解,但在引入Hooks之前无法保持状态。
  • Hooks在函数组件中引入状态和其他React特性,同时保持代码的简洁性和复用性。
  • 类组件功能强大,但编写和维护可能更加复杂,尤其是在处理this和生命周期方法时。

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879666.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[数据集][目标检测]车窗状态检测车窗开关检测数据集VOC+YOLO格式299张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;299 标注数量(xml文件个数)&#xff1a;299 标注数量(txt文件个数)&#xff1a;299 标注类别…

【零成本】七日杀 服务器搭建 异地联机 无需公网IP、服务器

主要内容 什么是七日杀 搭建前需要准备什么 详细步骤 1.Steam中下载七日杀服务器工具 2.修改七日杀服务配置文件 3.启动七日杀服务器应用 4.运行 MoleSDN 进行异地联机 5.小伙伴打开游戏加入 鼠鼠的服务器 什么是七日杀 《七日杀》是一款沙盒生存恐怖游戏&#xff0c;…

Python 入门指南:如何在 MacOS 上轻松安装 Python

Python 作为一门功能强大且易于学习的编程语言&#xff0c;已经成为许多开发者和数据科学家的首选工具。无论是初学者还是经验丰富的程序员&#xff0c;Python 都能为他们提供强大的支持。如果你是一名 MacOS 用户&#xff0c;想要开始学习 Python 或者在 Mac 上进行开发&#…

presto用到的框架

DI依赖注入框架 Google Guice: Dependency Injection Library import com.google.inject.Binder; import com.google.inject.Injector; import com.google.inject.Module; import com.google.inject.Provides; import com.google.inject.Scopes; import com.google.inject.mul…

海外云手机怎么实现TikTok多账号防关联?

TikTok多账号运营&#xff0c;作为众多用户选择的引流策略&#xff0c;旨在通过多账号的协同作用&#xff0c;更快速、高效地推动主账号的流量增长。然而&#xff0c;这一策略面临着一个关键难题——TikTok账号防关联。本文将简要介绍海外云手机如何解决这一问题。 在TikTok多账…

携手科大讯飞丨云衔科技为企业提供全栈AI技术解决方案

作为智能时代的核心驱动力&#xff0c;人工智能不仅重塑了传统行业的面貌&#xff0c;更开辟了全新的经济增长点。科大讯飞以其深厚的技术底蕴和创新能力&#xff0c;持续引领着人工智能领域的发展潮流。云衔科技作为科大讯飞开放平台的AI技术产品线合作伙伴代理商&#xff0c;…

c# 开发串口调试助手 Visual Studio 2019

一、串口调试工具作用 串口调试助手是用于在开发、测试和调试串口通信应用程序时进行串口数据的监视和交互的工具。它通常具有以下功能&#xff1a; 1. 串口参数设置&#xff1a;允许用户设置串口的波特率、数据位、校验位、停止位等参数。 2. 串口连接管理&#xff1a;允许用…

CAD中的spline详解

从dxf文件中提取点、直线、圆、弧等元素比较简单&#xff0c;但是Spline的处理比较麻烦。经过一段时间探索总结一下成果。 一、基本公式 1.有理样条曲线 查阅一些资料&#xff0c;认为CAD中使用的Spline 是非均匀有理样条曲线。实测CAD中每个控制点权重都是-1&#xff0c;所以…

物联网行业中小型嵌入式文件系统详解以及使用

一 概述 在嵌入式系统使用过程中&#xff0c;为了方便数据的存储&#xff0c;我们加入了串行的外部Flash(SPI通信)。在使用存储的时候&#xff0c;如需要记录一个字符串“奇迹物联Bloom OS”&#xff0c;我们可以把这些文字转化成 ASCII 码&#xff0c;存储在数组中&#xff0c…

WPF DataGrid 列表中,DataGrid.Columns 列根据不同的值显示不同内容

需求&#xff1a;在WPF DataGrid 控件中&#xff0c;有以下列&#xff0c;绑定了一个LogType&#xff0c;值分别是0,1,2&#xff0c;根据不同的值&#xff0c;显示不同的内容以及背景 <DataGrid ItemsSource"{Binding EventLog}"><DataGrid.Columns><…

P1190 [NOIP2010 普及组] 接水问题

题目描述 学校里有一个水房&#xff0c;水房里一共装有 m 个龙头可供同学们打开水&#xff0c;每个龙头每秒钟的供水量相等&#xff0c;均为 11。 现在有 n 名同学准备接水&#xff0c;他们的初始接水顺序已经确定。将这些同学按接水顺序从 1 到 n 编号&#xff0c;i 号同学的…

Android 后台服务之Persistent 属性

在 Android 开发中,有时我们需要后台服务持续运行,以保持应用的某些功能。例如,音乐播放器需要在后台播放音乐,或者健康应用需要持续跟踪用户的运动数据。后台服务是 Android 中的一种组件,它不与用户界面交互,能够在后台执行长时间运行的任务。由于 Android 系统的资源管…

Vue路由二(嵌套多级路由、路由query传参、路由命名、路由params传参、props配置、<router-link>的replace属性)

目录 1. 嵌套(多级)路由2. 路由query传参3. 路由命名4. 路由params传参5. props配置6. <router-link>的replace属性 1. 嵌套(多级)路由 pages/Car.vue <template><ul><li>car1</li><li>car2</li><li>car3</li></ul…

postgresql-patroni高可用安装部署

简介 patronietcd,算是目前比较主流的PG高可用搭配了。 patroni都出4.0版本了,一直没时间&#xff0c;断断续续写了好久&#xff0c;最近有人问到&#xff0c;那就当作一个笔记发表吧&#xff0c;自行搭建一个测试库做测试吧。来来回回改了好几遍。文中可能不妨地方没有同步修…

Android 源码多个Launcher设置默认Launcher

目录 第一部分、android10之前 一.多个launcher 启动设置默认launcher的核心类 二 在自定义服务里面设置默认Launcher 第二部分、android10之后 一、Launcher应用内置并设置为默认Launcher 1.通过ResolverActivity.java设置为默认Launcher 改法一&#xff1a; 改法二&am…

Linux使用Clash,clash-for-linux

文件下载 clash-for-linuxhttps://link.zhihu.com/?targethttps%3A//zywang.lanzn.com/ijE2a1m7h6mb&#xff08;百度和阿里云盘都不支持这个文件分享&#xff09;。 使用须知 - 此项目不提供任何订阅信息&#xff0c;请自行准备Clash订阅地址。 - 运行前请手动更改.env文件…

掌握ChatGPT:高效利用AI助手

2023 年 3 月 15 日&#xff0c;ChatGPT-4 的诞生标志着人类进入了一个全新的 人机协作时代。这个时代就像一个混沌初开的新世界&#xff0c;而 ChatGPT 则是这个新世界里诞生的一个新物种。 这个新物种的心智如同一个四五岁的小孩&#xff0c;在与它频繁互动中&#xff0c;人…

BFS 解决边权为1的最短路问题

文章目录 边权为1的最短路问题1926. 迷宫中离入口最近的出口题目解析算法原理代码实现 433. 最小基因变化题目解析算法原理代码实现 127. 单词接龙题目解析算法原理代码实现 675. 为高尔夫比赛砍树题目解析算法原理代码实现 边权为1的最短路问题 最短路问题&#xff1a; 比如…

Effective C++笔记之二十三:非void函数不写return

一.main函数 Qt Creator查看汇编的步骤如下 上图是g编译器下的汇编 eax就是main()函数的返回值 如果删掉return 0&#xff1b; 可以发现编译器还是把eax的值设为了0&#xff0c;由此可见&#xff0c;即使在main函数中不写return 0&#xff0c;编译器还是会默认添加个return 0。…

828华为云征文|华为Flexus云服务器搭建OnlyOffice私有化在线办公套件

一、引言 在当今数字化办公的时代&#xff0c;在线办公套件的需求日益增长。华为Flexus云服务器凭借其强大的性能和稳定性&#xff0c;为搭建OnlyOffice私有化在线办公套件提供了理想的平台。在2024年9月14日这个充满探索精神的日子里&#xff0c;我们开启利用华为Flexus云服务…