从0学习React(6)

ops/2024/11/1 19:32:41/

这两天在写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.ppmy.cn/ops/130213.html

相关文章

海外云手机是什么?对外贸电商有什么帮助?

在外贸电商领域&#xff0c;流量引流已成为卖家们关注的核心问题。越来越多的卖家开始利用海外云手机&#xff0c;通过TikTok等社交平台吸引流量&#xff0c;以推动商品在海外市场的销售。那么&#xff0c;海外云手机到底是什么&#xff1f;它又能为外贸电商卖家提供哪些支持呢…

后端检测_文件头检测漏洞

把上面的文件头添加到我们的一句话木马内容最前面&#xff0c;达到绕过文件头检测的目的。 常见的文件头&#xff1a; 注意&#xff1a;下面的文件头的格式是16进制的格式&#xff1a; GIF&#xff1a;47 49 46 38 39 61 png&#xff1a;89 50 4E 47 0D 0A 1A 0A JPG&#xf…

实用Python程序设计:第七章poj代码

047:校园食宿预订系统 n,mmap(int,input().split()) num{} price{} for i in range(m):na,pr,numap(str,input().split())num[na]int(nu)price[na]int(pr) sum0 for j in range(n):lislist(map(str,input().split()))for i in lis:if num[i]>0:num[i]num[i]-1sumprice[i] p…

Tornato入门

参考&#xff1a;https://www.w3cschool.cn/pytornado/Python Tornado 框架的终极指南&#xff01;_tornado框架-CSDN博客 安装一下tornada&#xff0c;pip install tornado 1&#xff1a;直接上手第一个程序 import tornado.ioloop import tornado.web# 创建一个处理 HTTP 请…

2024年三个月自学进阶手册 网络安全(黑客技术)

&#x1f91f; 基于入门网络安全/黑客打造的&#xff1a;&#x1f449;黑客&网络安全入门&进阶学习资源包 前言 什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、…

【应急响应】Linux植入恶意程序排查流程

文章目录 前言一、Linux入侵检查二、Linux系统被入侵/中毒有哪些现象三、Linux系统被入侵/中毒处置过程四、Linux安全防护措施五、服务器被GetShell渗透解决办法(案例)前言 本篇文章主要是以我们日常的运维工作中对Linux服务器进行安全检查,进一步介绍如何使用具体命令来对Li…

CMFCMaskedEdit 类和CIPAddressCtrl 类

CMFCMaskedEdit 类支持掩码编辑控件&#xff0c;此控件利用掩码验证用户输入&#xff0c;并根据模板显示验证的结果。 CIPAddressCtrl 类提供 Windows 公共 IP 地址控件的功能 执行以下步骤&#xff0c;以便在应用程序中使用 CMFCMaskedEdit 控件&#xff1a; 将 CMFCMasked…

单片机串口和电脑串口连接

单片机串口和电脑串口连接&#xff1a; 先将MCU的TTL电平转换为RS232电平&#xff0c;才可以和电脑的串口DB9相连接。见下图所示&#xff1a; 翻看自己以前记录的笔记&#xff0c;真是初级到极点了。