从0学习React(6)

这两天在写IT资产管理的时候,对于前端,我一直没有任何头绪,不知道怎么写。因为我之前并没有学习过前端方面的知识,我学的都是后端。我在写后端接口的时候,我是自己有一些基础的,然后我又参照着模仿着一些很相似的接口,然后配合AI来写,所以才能写的出来。所以,对于前端,我也想仿照着写后端接口的模式,先找一个很像的页面,然后配合着AI来仿照着来写。其实这个思路完全没有问题,但是我忽略了一点,就是我的前端基础太差,几乎为0,我写了一天,发现不行,因为我并不是“配合AI”,而是“完完全全依赖AI”来写,所以我让AI写了一天,也不知道写了啥出来。直到今天,我意识到这个问题,所以我想了想,决定先把前端的那个被模仿的那个页面的代码给看懂,清楚的知道这个页面的代码,然后我再自己仿照着来改,然后有时候用一用AI配合着来写,这样才有机会做出来。

所以这篇文章,我先把前端被模仿页面的一部分代码给弄熟。

首先是这个代码:

const [showDetail, setShowDetail] = useState<boolean>(false);

这行代码使用了 React 的 useState 钩子来声明一个状态变量 showDetail 及其对应的更新函数 setShowDetail

解析

1. const [showDetail, setShowDetail] = ...
  • 这部分代码使用了数组解构赋值(array destructuring assignment)语法。
  • showDetail 是状态变量,表示当前状态的值。
  • setShowDetail 是一个函数,用于更新 showDetail 的值。
2. useState<boolean>(false)
  • useState 是 React 的一个钩子,用于在函数组件中添加状态。
  • <boolean> 是 TypeScript 的泛型类型注解,表示 showDetail 的类型是布尔值(boolean)。
  • false 是 useState 的初始值,这里表示 showDetail 的初始状态为 false

useState 钩子

useState 是 React 中用于在函数组件中管理状态的钩子。它接受一个初始状态值,并返回一个包含两个元素的数组:

  1. 当前状态的值。
  2. 更新状态的函数。

TypeScript 泛型注解

<boolean> 是 TypeScript 的泛型注解,用于指定 useState 钩子的状态类型。在这个例子中,<boolean> 表示 showDetail 的类型是布尔值。如果你希望更严格地类型检查,可以使用这种注解。

初始状态值

false 是 useState 的初始状态值。在这个例子中,showDetail 的初始值是布尔值 false,表示初始状态下不显示详细信息。

代码例子

其实这个和类组件很像,我当时在写小程序的时候,用的就是类组件,现在这个PC端用的是函数组件。说到这里,我就顺便说一下函数组件和类组件的对比吧,其实最大的不同就是状态管理,其他感觉都大差不差。

状态管理

类组件

在类组件中,状态管理通过 this.state 和 this.setState 实现。

函数组件

在函数组件中,状态管理通过 useState 钩子实现。

生命周期方法

类组件

类组件有多个生命周期方法,如 componentDidMountcomponentDidUpdate 和 componentWillUnmount。

函数组件

函数组件没有传统的生命周期方法,但可以使用 useEffect 钩子来实现相同的功能。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

单个相机矫正畸变

1、通过标定助手获取到内参外参&#xff0c;外参在此无效&#xff0c;只用到了内参 2、然后通过halcon算子进行矫正 参考&#xff1a;超人视觉

乘云而上,OceanBase再越山峰

一座山峰都是一个挑战&#xff0c;每一次攀登都是一次超越。 商业数据库时代&#xff0c;面对国外数据库巨头这座大山&#xff0c;实现市场突破一直都是中国数据库产业多年夙愿&#xff0c;而OceanBase在金融核心系统等领域的攻坚克难&#xff0c;为产业突破交出一副令人信服的…

laravel: Breeze 和 Blade, 登录 注册等

composer require laravel/breeze --dev php artisan breeze:install php artisan migrate npm install npm run build php artisan route:clear http://laravel-dev.cn/ http://laravel-dev.cn/register http://laravel-dev.cn/login

VS+Qt解决提升控件后,包含头文件格式不对问题处理

一、前言 VSQt 提升控件后&#xff0c;在uic目录下会生成ui相关的初始化文件&#xff0c;对于提升的控件头文件包含的格式为#include<> 而非 #include “ ” 导致无法找到头文件。如果手动修改为 #include “ ”相当麻烦&#xff0c;甚至每次编译都要修改一遍&#xff0c…

一些硬件知识【2024/11/3】

MLCC电容的ESR比较小&#xff0c;但是他的缺点是容量通常比较低&#xff1b;电解电容的容量比较大&#xff0c;但是他的ESR比较大&#xff1b;而钽电容介于两者之间&#xff0c;是MLCC找不到合适的容值比较大的时候&#xff0c;找钽电容&#xff1a; LC谐振电路&#xff1a; 五…

简单的ELK部署学习

简单的ELK部署学习 1. 需求 我们公司现在使用的是ELK日志跟踪&#xff0c;在出现问题的时候&#xff0c;我们可以快速定为到问题&#xff0c;并且可以对日志进行分类检索&#xff0c;比如对服务名称&#xff0c;ip , 级别等信息进行分类检索。此文章为本人学习了解我们公司的…

SpringBoot篇(自动装配原理)

目录 一、自动装配机制 1. 简介 2. 自动装配主要依靠三个核心的关键技术 3. run()方法加载启动类 4. 注解SpringBootApplication包含了多个注解 4.1 SpringBootConfiguration 4.2 ComponentScan 4.3 EnableAutoConfiguration 5. SpringBootApplication一共做了三件事 …

科学减肥:基础代谢减肥法

基础代谢减肥法是什么&#xff1f; 相信有很多人在减肥的路上都有做过努力&#xff0c;但是效果往往和努力不匹配。那是因为很多时候在细节上面没有做对&#xff0c;大家都是根据自己的理解去努力&#xff0c;而没有深度去了解过身体营养成分构成与吸收。 没科学了解过减肥的原…

华为云安装docker

docker_docker-compose_install: 代替官网的一键安装脚本&#xff0c;使用docker包进行离线安装 bash <(curl -sL https://raw.githubusercontent.com/1scripts/docker_docker-compose_install/main/quick_install.sh) 华为镜像&#xff1a; https://console.huaweicloud.…

中欧科学家论坛暨第六届人工智能与先进制造国际会议(AIAM 2024)在德国法兰克福成功举办,两百余名中外科学家共襄盛举

2024年10月20至21日&#xff0c;首届中欧科学家论坛在德国法兰克福的SAALBAU Titus Forum国际会议中心成功举行。中国驻法兰克福总领事馆伍鹏飞副总领事、德国兰斯巴赫-鲍姆巴赫市市长Michael Merz亲自出席并致辞。2004年诺贝尔化学奖得主Aaron Ciechanover教授和法国国家科学院…

Leetcode73. 矩阵置零

问题描述&#xff1a; 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]]示例 2…

Spring Boot中实现多数据源连接和切换的方案

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…

服务器数据恢复—SAN环境中LUN映射错误导致文件系统一致性出错的数据恢复案例

服务器数据恢复环境&#xff1a; SAN光纤网络环境&#xff0c;存储由一组6块硬盘组建的RAID6阵列构成&#xff0c;划分为若干LUN&#xff0c;MAP到跑不同业务的SUN SOLARIS操作系统服务器上。 服务器故障&分析&#xff1a; 因为业务需要&#xff0c;用户在该光纤存储环境中…

java毕业设计之基于Bootstrap的常州地方旅游管理系统的设计与实现(springboot)

项目简介 基于Bootstrap的常州地方旅游管理系统的设计与实现有下功能&#xff1a; 基于Bootstrap的常州地方旅游管理系统的设计与实现的主要使用者分为用户功能模块和管理员功能模块两大部分&#xff0c;用户可查看景点信息、景点资讯等&#xff0c;注册登录后可进行景点订票…

Linux 练习三

1、建立用户组 shengcan&#xff0c;其id 为 2000 [rootlocalhost 桌面]# groupadd -g 2000 shengchan 2、建立用户组 caiwu&#xff0c;其id 为 2001 [rootlocalhost 桌面]# groupadd -g 2001 caiwu 3、建立用户组 jishu&#xff0c;其 id 为 2002 [rootlocalhost 桌面]#…

mfc140u.dll丢失怎么办? mfc140u.dll文件缺失的修复技巧

mfc140u.dll 是 Microsoft Foundation Classes (MFC) 库的一部分&#xff0c;它是 Visual Studio 2015 的组件之一&#xff0c;主要服务于使用 C 编写的 Windows 应用程序。这个动态链接库文件包含了 MFC 14.0 Unicode 版本的实现代码&#xff0c;为应用程序提供运行时支持。当…

在Ubuntu上安装TensorFlow与Keras

文章目录 1. 查看系统和Python版本信息1.1 查看Ubuntu版本信息1.2 查看Python版本信息 2. 安装pip2.1 下载get-pip.py2.2 运行get-pip.py2.3 查看pip版本 3. 安装Jupyter Notebook3.1 安装Jupyter Notebook3.2 运行Jupyter Notebook3.3 安装jupyter-core3.4 配置Jupyter Notebo…

反射简介及简单使用

1、反射的定义及作用 在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够获取到这个类的所有属性和方法&#xff0c;对于任意一个对象&#xff0c;都能够调用它的任意一个方法和属性(包括私有的方法和属性)&#xff0c;这种动态获取类的信息以及动态调用对象的方法的功…

iOS 18.2 可让欧盟用户删除App Store、Safari、信息、相机和照片应用

升级到 iOS 18.2 之后&#xff0c;欧盟的 iPhone 用户可以完全删除一些核心应用程序&#xff0c;包括 App Store、Safari、信息、相机和 Photos 。苹果在 8 月份表示&#xff0c;计划对其在欧盟的数字市场法案合规性进行更多修改&#xff0c;其中一项更新包括欧盟用户删除系统应…

基于Spring Boot的信息学科平台系统开发与优化

6系统测试 6.1概念和意义 测试的定义&#xff1a;程序测试是为了发现错误而执行程序的过程。测试(Testing)的任务与目的可以描述为&#xff1a; 目的&#xff1a;发现程序的错误&#xff1b; 任务&#xff1a;通过在计算机上执行程序&#xff0c;暴露程序中潜在的错误。 另一个…