初始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、终止进程用什么命令…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ，不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源（最常用） conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...
多元隐函数 偏导公式
我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式，给定一个隐函数关系： F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标： 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...
向量几何的二元性：叉乘模长与内积投影的深层联系
在数学与物理的空间世界中，向量运算构成了理解几何结构的基石。叉乘（外积）与点积（内积）作为向量代数的两大支柱，表面上呈现出截然不同的几何意义与代数形式，却在深层次上揭示了向量间相互作用的…...