初始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、终止进程用什么命令…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...