初始React
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
</head>
<body>
了解React
<!-- React是一个用于构建web和原生态交互界面的库
相对于传统DOM开发优势：组件化开发方式，还有不错的性能
相较于其他前端框架的优势：有丰富的生态和跨平台支持
-->
<!-- 使用create-react-app快速搭建开发环境
create-react-app是一个快速创建React开发1环境的工具，底层由Webpack构建，封装了配置细节，开箱即用
执行命令：
npx create-react-app react-basic
1.npx Node.js工具命令，查找执行后续的包命令
2.creat-react-app 核心包（固定写法），用于创建React项目
3.react-basic React项目的名称（可以自定义）
在创建好的项目里可以看到package.json文件
里面的主要依赖是
"react": "^18.2.0",
"react-dom": "^18.2.0",
核心命令是：
"start": "react-scripts start",
"build": "react-scripts build",
刚开始学习建议先把src里的文件清理，只需保留app.js和index.js
-->
组件
<!--
概念：一个组件就是用户界面的一部分，它可以由自己的逻辑外观，组件之间可以相互嵌套，也可以复用多次
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用
在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可（在App内）
// 1. 定义组件
const Button = () => {
// 业务逻辑组件逻辑
return <button>click me!</button>
}
// 箭头函数定义
function Button(){
return <button>click me!</button>
}
// 常规函数定义
function App() {
return (
<div className="App">
{/* 2. 使用组件（渲染组件） */}
{/* 自闭和（单标签） */}
<Button />
{/* 成对标签 */}
<Button></Button>
</div>
)
}
-->
useState基础使用
<!-- useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）
const [count,setCount] = useState(0)
// 数组接收useState
1.useState是一个函数，返回值是一个数组
2.数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3.useState的参数将作为count的初始值
// useState实现一个计数器按钮
import { useState } from 'react'
//引入useState
// const是不能改变值，但现在是复杂数据类型，修改的是引入地址里面的值，不是修改了引入地址
function App () {
// 1. 调用useState添加一个状态变量
// count 状态变量
// setCount 修改状态变量的方法
const [count, setCount] = useState(0)
// 2. 点击事件回调
const handleClick = () => {
// 作用:
// 1. 用传入的新值修改count
// 2. 重新使用新的count渲染UI
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick}>{count}</button>
</div>
)
}
-->
useState修改规则
<!-- 在React中，状态被认为是只读，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新
function App () {
let [count, setCount] = useState(0)
const handleClick = () => {
// 直接修改 无法引发视图更新
// count++
// console.log(count)
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick}>{count}</button>
</div>
)
-->
<!-- 修改对象状态
规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改
const [form, setForm] = useState({ name: 'jack' })
const changeForm = () => {
// 错误写法：直接修改
// form.name = 'john'
// 正确写法：setFrom 传入一个全新的对象（新值替换老值）
setForm({
...form,
// 展开原本有的字段
name: 'john'
})
}
return (
<div>
<button onClick={changeForm}>修改form{form.name}</button>
</div>
)
-->
组件基础样式方案
<!--
1.行内样式（不推荐）
2.class类名控制
// 在js文件里导入样式（css）
import './index.css'
// 通过类名控制才需要导入
const style = {
color: 'red',
fontSize: '50px'
}
function App () {
return (
<div>
{/* 行内样式控制 */}
<span style={style}>this is span</span>
{/* <span style={color: 'red'，fontSize: '50px'}>this is span</span> */}
{/* 这样写也行 */}
{/* 通过class类名控制 */}
<span className="foo">this is class foo</span>
{/* className是规定好的名字，不能用class */}
</div>
)
}
-->
</body>
</html>
相关文章：
初始React
<!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <title>React</title> </head> <body> 了解React <!-- React是一个用于构建web和原生态交互界面的库 相对于传统DOM开发优势：组件化开发…...
2.5 逆矩阵
一、逆矩阵的注释 假设 A A A 是一个方阵，其逆矩阵 A − 1 A^{-1} A−1 与它的大小相同， A − 1 A I A^{-1}AI A−1AI。 A A A 与 A − 1 A^{-1} A−1 会做相反的事情。它们的乘积是单位矩阵 —— 对向量无影响，所以 A − 1 A x x A^{…...
物流实时数仓：数仓搭建（ODS）
系列文章目录 物流实时数仓：采集通道搭建 物流实时数仓：数仓搭建 文章目录 系列文章目录前言一、IDEA环境准备1.pom.xml2.目录创建 二、代码编写1.log4j.properties2.CreateEnvUtil.java3.KafkaUtil.java4.OdsApp.java 三、代码测试总结 前言 现在我们…...
【ARM 嵌入式 编译 Makefile 系列 18 -- Makefile 中的 export 命令详细介绍】
文章目录 Makefile 中的 export 命令详细介绍Makefile 使用 export导出与未导出变量的区别示例：导出变量以供子 Makefile 使用 Makefile 中的 export 命令详细介绍 在 Makefile 中，export 命令用于将变量从 Makefile 导出到由 Makefile 启动的子进程的环…...
【opencv】计算机视觉：停车场车位实时识别
目录 目标 整体流程 背景 详细讲解 目标 我们想要在一个实时的停车场监控视频中，看看要有多少个车以及有多少个空缺车位。然后我们可以标记空的，然后来车之后，实时告诉应该停在那里最方便、最近！！！实现…...
：FFmpeg与SDL环境配置)
播放器开发(三)：FFmpeg与SDL环境配置
学习课题：逐步构建开发播放器【QT5 FFmpeg6 SDL2】 环境配置 我这边的是使用macOS；IDE用的是CLion；CMake构建，除了创建项目步骤、CMakeLists文件有区别之外的代码层面不会有太大区别。 配置上只添加一下CMakeLists中FFmpeg和SD…...
KubeVela核心控制器原理浅析
前言 在学习 KubeVela 的核心控制器之前，我们先简单了解一下 KubeVela 的相关知识。 KubeVela 本身是一个应用交付与管理控制平面，它架在 Kubernetes 集群、云平台等基础设施之上，通过开放应用模型来对组件、云服务、运维能力、交付工作流进…...
迎接“全全闪”时代 XSKY星辰天合发布星海架构和星飞产品
11 月 17 日消息，北京市星辰天合科技股份有限公司（简称：XSKY星辰天合）在北京首钢园举办了主题为“星星之火”的 XSKY 星海全闪架构暨星飞存储发布会。 （图注：XSKY星辰天合 CEO 胥昕） XSKY星辰天…...
[架构相关]基础架构设计原则
基础架构设计原则 文章目录 基础架构设计原则一、可用性（Availability）1.1、引入冗余1.2、负载均衡1.3、故障转移1.4、备份和恢复策略 二、可扩展性（Scalability）2.1 水平扩展2.2 垂直扩展2.3 弹性扩展 三、可靠性（Rel…...
测试在 Oracle 下直接 rm dbf 数据文件并重启数据库
创建一个新的表空间并创建新的用户，指定新表空间为新用户的默认表空间 create tablespace zzw datafile /oradata/cesdb/zzw01.dbf size 10m;zzw用户已经创建过，这里修改其默认表空间 alter user zzw quota unlimited on zzw; alter user zzw default …...
【开源】基于JAVA的计算机机房作业管理系统
项目编号： S 017 ，文末获取源码。 \color{red}{项目编号：S017，文末获取源码。} 项目编号：S017，文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 登录注册模块2.2 课程管理模块2.3 课…...
Ubuntu 配置静态 IP
Ubuntu 18 开始可以使用netplan配置网络。配置文件位于/etc/netplan/xxx.yaml中，netplan默认是使用NetworkManager来配置网卡信息的。 修改配置文件： 1、打开文件编辑：sudo vi 01-network-manager-all.yaml原文件内容如下：netwo…...
Spring Cloud实战 |分布式系统的流量控制、熔断降级组件Sentinel如何使用
专栏集锦，大佬们可以收藏以备不时之需 Spring Cloud实战专栏：https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏：https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏：https:/…...
第六届 传智杯初赛B组
文章目录 A. 字符串拼接🍻 AC code B. 最小差值🍻 AC code C. 红色和紫色🍻 AC code D. abb🍻 AC code E. kotori和素因子🍻 AC code F. 红和蓝🍻 AC code 🥰 Tips：AI可以把代码从 j…...
文档向量化工具（二）：text2vec介绍
目录 前言 text2vec开源项目 核心能力 文本向量表示模型 本地试用 安装依赖 下载模型到本地（如果你的网络能直接从huggingface上拉取文件，可跳过） 运行试验代码 前言 在上一篇文章中介绍了，如何从不同格式的文件里提取…...
vscode中pylance无法显示outline无法跳转
当打开的workspce中有较多的文件时，pylance需要分析的文件太多，导致卡住，无法分析到对应的python文件 常见的情况是，当我们在workspace中包含了data文件夹（通常是通过软连接方式把数据集链接过来）…...
番外篇之通讯录
前言：用到的知识点有枚举、结构体、数组，快速排序（用的名字排序） 下面是测试函数： test.c #define _CRT_SECURE_NO_WARNINGS 1 #include"contact.h" void menu() {printf("*************************…...
学生信息管理系统程序Python
系统主界面 在该界面中可以选择要使用功能对应的菜单进行不同的操作。在选择功能菜单时，有两种方法， 一种是输入1，另一种是按下键盘上的↑或↓方向键进行选择。这两种方法的结果是一样的，所以使用哪种方法都可以。 （…...
[js] for forEach for of 循环里await关键字的用法
1、for：循环中使用await的写法（生效） async function loop(){for( let i0; i<array.length; i ){let datas await getDatas()break} }2、forEach：循环中使用await的写法（不生效）： array.f…...
Linux面试题（二）
目录 17、怎么使一个命令在后台运行? 18、利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进程的信息？ 19、哪个命令专门用来查看后台任务? 20、把后台任务调到前台执行使用什么命令?把停下的后台任务在后台执行起来用什么命令? 21、终止进程用什么命令…...
2026年Google 关键词排名监控实战教程
做 SEO 的人，几乎都有这种体验： 关键词刚优化上去，工具提示你已经在首页；结果过两天自己去搜，排名不一样；换个设备、换个网络看，结果又变了。更麻烦的是，频繁搜索还容易被验证、页面…...
根据WFWORKITEM 表的＜ PROCESSDEFNAME＞字段关联WFPROCESSDEFPROPERTIES表获取对应app_code
问题描述： 根据WFWORKITEM 表的< PROCESSDEFNAME>字段关联WFPROCESSDEFPROPERTIES表获取对应app_code 解答: 因为WFPROCESSDEFPROPERTIES表在同一个<tenant_id>（租户）的<PROCESSDEFNAME>值是唯一的， 所以可…...
告别复制粘贴！用Zotero+BibTeX一键搞定IEEE会议论文参考文献（Better BibTeX插件实战）
科研效率革命：ZoteroBibTeX全自动文献管理方案 在撰写学术论文时，参考文献管理往往是耗时又容易出错的一环。特别是对于需要频繁投稿IEEE会议的研究人员来说，手动复制粘贴bibtex条目、整理citation key的过程既枯燥又低效。想象一下ÿ…...
BEYOND REALITY Z-Image开源镜像实操：Docker Compose一键部署全流程
BEYOND REALITY Z-Image开源镜像实操：Docker Compose一键部署全流程 想体验一下生成媲美专业摄影棚级别的人像照片吗？今天要介绍的这个工具，或许能让你眼前一亮。它叫BEYOND REALITY Z-Image，一个专注于生成高精度写实人像的开源…...
51单片机GPIO控制实战：手把手教你玩转P0-P3端口
51单片机GPIO深度实战：从端口特性到高级控制技巧 当你第一次点亮LED时，那种成就感就像打开了嵌入式世界的大门。但真正掌握51单片机的GPIO，远不止让灯闪烁那么简单。P0-P3这四个看似简单的端口，藏着许多工程师多年积累的实战经验。…...
渗透测试报告撰写：漏洞发现到验证流程
渗透测试报告的核心是“如实记录漏洞、清晰呈现流程”，很多人觉得撰写复杂，其实只要抓住“漏洞发现—漏洞验证—报告呈现”三个核心环节，就能写出规范且易懂的报告。全程无需堆砌专业术语，重点是把“怎么找到漏洞、怎么确认漏洞、…...
【文献分享】CONCERT 在空间转录组学中预测了针对特定领域的扰动反应
文章目录介绍代码参考介绍 空间扰动转录组学用于测量基因或化学修饰如何改变基因表达，同时保持组织环境的完整性。扰动的结果取决于细胞的内在状态，也取决于这些影响在细胞微环境中的传播方式。 我们推出了 CONCERT 这款针对特定区域的生成模型…...
深度解析Cursor Pro激活器：3层架构突破AI代码编辑器限制的技术实现
深度解析Cursor Pro激活器：3层架构突破AI代码编辑器限制的技术实现 【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reac…...
5个真实案例解析：TLA+在分布式系统验证中的实际应用
5个真实案例解析：TLA在分布式系统验证中的实际应用 【免费下载链接】tlaplus TLC is a model checker for specifications written in TLA. The TLAToolbox is an IDE for TLA. 项目地址: https://gitcode.com/gh_mirrors/tl/tlaplus TLA是一种强大的形式化…...
深度解析：ComfyUI-Manager节点冲突检测的5种技术解决方案与架构设计
深度解析：ComfyUI-Manager节点冲突检测的5种技术解决方案与架构设计 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable …...