当前位置：首页 > news >正文

千峰React:组件使用（1）

news 来源：原创 2025/9/19 22:03:56

事件

添加点击事件

function App() {const handClick = () => {console.log(123)}return (<><button onClick={handClick}>点击</button></>)
}
export default App

在react里也可以添加事件对象e

合成e

这个e和js里的e不太一样，是合成的e，里面也可以使用原生的js事件

一个是鼠标经过事件，一个是点击事件，显示出来也不一样

事件委托到容器

我们刚刚添加的事件实际上都会经过react添加到root上，通过事件委托的方式触发

委托的好处就是结构发生变化以后不影响事件

传参处理

箭头函数和高阶函数

高阶函数是用函数的返回值为函数操作的

箭头函数可以传多个参数

function App() {const handClick = (e) => {console.log(e)}const handleEnter = (e) => {console.log(e)}const handClick2 = (num) => {return () => {console.log(num)}} //函数调用完返回值还是一个函数，是一种高级用法const handClick3 = (num, e) => {console.log(num, e)}//箭头函数传参return (<><button onClick={handClick} onMouseEnter={handleEnter}>点击1</button><button onClick={handClick2(123)}>点击2-传参</button><button onClick={(e) => handClick3(123, e)}>点击3-箭头函数</button></>)
}
export default App

实操更推荐箭头函数的使用，可以少出bug

箭头函数可以灵活的控制传不传参，传参就写箭头，不传就不写箭头；高阶函数的用法做不到想不传参就不传参

根据不同的条件渲染不同内容

条件运算符、短路运算

如果你想把对象、函数这类在结构上渲染不出来的内容渲染出来，那就使用JSON.stringfy()

如果是其他类型可以使用{undefined+‘’}

function App() {return (<div>{function () {} + ''}<br />{null + ''}<br />{undefined + ''}<br />{JSON.stringify({ username: '荷叶饭' })}</div>)
}
export default App

妈的写了三千字的博客没保存cnm

千峰React:组件使用（1）

事件添加点击事件 function App() {const handClick () > {console.log(123)}return (<><button onClick{handClick}>点击</button></>) } export default App在react里也可以添加事件对象e 合成e 这个e和js里的e不太一样，是合成的…...

编程日记 2025/9/19 22:03:56

ram的使用——初始化很重要

背景 ram是非常常用的ip，前人的经验告诉我们，如果不对ram进行初始化直接读写，不定态在实际上板时会出现不可预知的问题。我们需要对ram进行初始化写0操作，代码如下。需要注意，复位释放时立马写入可能存在复位抖动的…...

编程日记 2025/9/17 9:38:50

JVM深入理解

目录 JVM介绍： 解释： 特点： 整体构成： 执行过程： 运行时数据区： Java堆剖析： 堆内存区域划分为什么要分代呢？ 内存分配： 新生区与老年区配置比例&#xff1a…...

编程日记 2025/9/19 17:17:55

DeepSeek 开放平台无法充值改用其他平台API调用DeepSeek-chat模型方法

近几天DeepSeek开放平台无法充值目前已经关闭状态，大家都是忙着接入DeepSeek模型 ，很多人想使用DeepSeek怎么办？ 当然还有改用其他平台API调用方法，本文以本站的提供chatgpt系统为例，如何修改DeepSeek-chat模型API接口…...

编程日记 2025/9/19 3:00:23

ImportError: cannot import name ‘FixtureDef‘ from ‘pytest‘

错误信息表明 pytest 在尝试导入 FixtureDef 时出现了问题。通常是由于 pytest 版本不兼容或插件版本冲突引起的。以下是详细的排查步骤和解决方案： 1. 检查 pytest 版本首先，确认当前安装的 pytest 版本。某些插件可能需要特定版本的 pytest 才能…...

编程日记 2025/9/16 13:20:16

懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)

1.合集懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)：https://www.bilibili.com/video/BV1M6rdYEEog/ 备注： 1.本地离线卡密采用最安全的非对称加解密技术，设备id采用最安全多重混合加密不可逆技术生成&…...

编程日记 2025/9/17 9:38:42

Rust编程语言入门教程（六）变量与可变性

Rust 系列 🎀Rust编程语言入门教程（一）安装Rust🚪 🎀Rust编程语言入门教程（二）hello_world🚪 🎀Rust编程语言入门教程（三） Hello Cargo&#x1f…...

编程日记 2025/9/17 9:38:41

ArcGis和Super Map

1.ArcGIS ArcGIS 是美国环境系统研究所（ESRI）开发的一系列地理信息系统（GIS）软件产品的总称，它提供了一套全面的工具和服务，可用于采集、存储、分析、管理和展示地理数据，在众多领域都有广泛的…...

编程日记 2025/9/17 9:38:39

57000单词原始录入时间258S 核心代码: List<Word> wordBookList ExcelUtil.getReader(file.getInputStream()).readAll(Word.class);if (!CollectionUtil.isEmpty(wordBookList)) {for (Word word : wordBookList) {//逐条向数据库中插入单词wordMapper.insert(word);}…...

编程日记 2025/9/19 6:32:55

Zookeeper和Kafka的依赖关系

Zookeeper 和 Kafka 是紧密相关的，它们在功能上相互协作，共同为分布式系统提供支持，以下是它们的关系具体介绍： Kafka 依赖 Zookeeper 进行元数据管理主题信息存储：Kafka 中的主题（Topic）相关信息，如主题的名称、分区数量、副本分布等都存储在 Zookeeper 中。当 Kafk…...

编程日记 2025/9/19 19:30:57

驱动开发、移植

一、任务明确：把创龙MX8的驱动按照我们的要求然后移植到我们的板子 1.Linux系统启动卡制作， sd卡先按照《用户手册—3-2-Linux系统启动卡制作及系统固化》把创龙的Linux系统刷进去。 2. 把TLIMX8-EVM的板子过一遍把刚刚烧好系统的sd卡插入创…...

编程日记 2025/9/17 9:38:33

RT-Thread+STM32L475VET6实现红外遥控实验

文章目录前言一、板载资源介绍二、具体步骤1. 确定红外接收头引脚编号2. 下载infrared软件包3. 配置infrared软件包4. 打开STM32CubeMX进行相关配置4.1 使用外部高速时钟，并修改时钟树4.2 打开定时器16(定时器根据自己需求调整)4.3 打开串口4.4 生成工程 5. 打开HW…...

编程日记 2025/9/18 17:55:06

分布式大语言模型服务引擎vLLM论文解读

论文地址：Efficient Memory Management for Large Language Model Serving with PagedAttention 摘要大语言模型（LLMs）的高吞吐量服务需要一次对足够多的请求进行批处理。然而，现有系统面临困境，因为每个请求的键值…...

编程日记 2025/9/17 9:38:29

Bio-ORACLE数据分享[decade 2010-2020] [Surface layers]

Bio-ORACLE数据分享[decade 2010-2020] [Surface layers] 文章目录 Bio-ORACLE数据分享[decade 2010-2020] [Surface layers]前言一、文件分享（主要）二、相关代码（选看）总结 Bio-ORACLE数据分享[decade 2010-2020] [Surface layer…...

编程日记 2025/9/18 14:38:14

MySQL六大日志的功能介绍。

前言首先，MySQL的日志应该包括二进制日志（Binary Log）、错误日志（Error Log）、查询日志（General Query Log）、慢查询日志（Slow Query Log）、重做日志（Redo …...

编程日记 2025/9/19 5:32:51

ChatGPT客户端无法在微软应用商店下载的解决方法

最近网页端的GPT4o只会用how can I assist you 回复了，查了一下发现是类似IP封锁/模型降级等等问题，总之解决方法就是下载客户端。客户端需要通过微软应用商店下载，但是下载时总会出现如下情况： 1.区域和语言没有设置为美国/英语导…...

编程日记 2025/9/17 23:23:34

数仓搭建(hive):DWS层(服务数据层)

DWS层示例: 搭建日主题宽表需求维度步骤在hive中建数据库dws >>建表 CREATE DATABASE if NOT EXISTS DWS; 建表sql CREATE TABLE yp_dws.dws_sale_daycount( --维度 city_id string COMMENT 城市id, city_name string COMMENT 城市name, trade_area_id string COMME…...

编程日记 2025/9/17 9:38:22

Ollama+DeepSeek+Open-WebUi

环境准备 Docker Ollama Open-WebUi Ollama 下载地址：Ollama docker安装ollama docker run -d \ -v /data/ollama/data:/root/.ollama \ -p 11434:11434 \ --name ollama ollama/ollama 下载模型 Ollama模型仓库 # 示例：安装deepseek-r1:7b doc…...

编程日记 2025/9/18 22:31:12

【笔记】LLM｜Ubuntu22服务器极简本地部署DeepSeek+联网使用方式

2025/02/18说明：2月18日~2月20日是2024年度博客之星投票时间，走过路过可以帮忙点点投票吗？我想要前一百的实体证书，经过我严密的计算只要再拿到60票就稳了。一人可能会有多票，Thanks♪(･ω･)&am…...

编程日记 2025/9/19 19:07:49

FreeSwitch中mod_dptools和mod_easyroute两个模块及应用场景

FreeSWITCH 中的 mod_dptools 和 mod_easyroute 是两个功能不同的模块，分别服务于呼叫控制和动态路由场景。以下是详细介绍： mod_dptools 功能概述 mod_dptools（Dialplan Tools）是 FreeSWITCH 最核心的模块之一，提供了…...

编程日记 2025/9/17 7:25:49

【Java】泛型与集合篇 —— Set 接口

目录 Set 接口及实现类HashSet 类特点内部实现构造方法LinkedHashSet 类基本概念特点构造方法常用方法适用场景用 Set 对象实现集合运算TreeSet 类特性构造方法常用方法注意事项对象顺序自然排序定制排序注意事项Set 接口及实现类 HashSet 类 HashSet 是 Java 集合框架中 Set…...

编程日记 2025/9/17 9:38:14

DeepSeek 助力 Vue 开发：打造丝滑的右键菜单（RightClickMenu）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/9/17 9:38:13

数据结构与算法面试专题——堆排序

完全二叉树完全二叉树中如果每棵子树的最大值都在顶部就是大根堆完全二叉树中如果每棵子树的最小值都在顶部就是小根堆设计目标：完全二叉树的设计目标是高效地利用存储空间，同时便于进行层次遍历和数组存储。它的结构使得每个节点的子节点都可以通过简…...

编程日记 2025/9/17 9:38:11

【Mysql】索引

【Mysql】索引一、索引的简介二、索引结构2.1 Hash2.2 二叉搜索树2.3 B树2.4 B树三、索引分类3.1 主键索引3.2 普通索引3.3 唯一索引3.4 全文索引3.5 聚集索引3.6 非聚集索引3.7 索引覆盖四、使用索引4.1 自动创建索引4.2 手动创建索引4.2.1 主键索引4.2.2 唯一索引4.2.3 普…...

编程日记 2025/9/19 1:59:25

qt的下载安装详细介绍

下载我们可以在国内的镜像网站上下载qt安装包，按需下载： 我的需求是在windows上运行，x64的qt5.15.2,所以我下载的是qt-unified-windows-x64-4.6.0-online.exe 下载完成之后，我们来到存放该exe文件的目录，打开命令窗…...

编程日记 2025/9/18 20:11:45

Eclipse插件开发六：使用Web前端技术开发AI助手页面

之前的过程中，我们都不怎么熟悉Eclipse的哪些API，样式也没发怎么去修改，现在我们要修改为用html的方式来编写. 准备一个AI助手聊天页面的html.css,js代码效果如下所示。 1.快速demo 1.1.准备前端代码确保准备的前端代码可以在浏览器正常…...

编程日记 2025/9/19 21:08:40

Jackson使用

Jackson 是一个功能强大的 JSON 处理库，除了基本的序列化和反序列化功能外，它还提供了许多其他功能，以满足不同的需求。以下是一些常用的高级功能： 0.普通序列化反序列化序列化 import com.fasterxml.jackson.databind.ObjectM…...

编程日记 2025/9/19 20:51:39

Maven——Maven开发经验总结（1）

摘要本文总结了 Maven 开发中的多个关键经验，包括如何根据版本号决定推送到 releases 或 snapshots 仓库，如何在构建过程中跳过测试，父项目如何控制子项目依赖版本，父项目依赖是否能传递到子项目，如何跳过 Maven dep…...

编程日记 2025/9/19 8:42:13

MyBatis-Plus之通用枚举

MyBatis-Plus之通用枚举前言 MyBatis-Plus中提供了通用枚举，简单来说就是将数据库中的某一字段的代替的含义转换成真实的含义将数据展示给用户，用户在存储时也会将真实值转换成代替的数字存入到数据库中。举个例子：用户性别在数据库中存储…...

编程日记 2025/9/18 0:20:11

React通用登录/注销功能实现方案（基于shadcn/ui）

React通用登录/注销功能实现方案（基于shadcn/ui） 一、功能需求分析二、通用功能封装1. 通用登录表单组件2. 认证Hook封装三、功能使用示例1. 登录页面实现2. 用户菜单实现四、路由保护实现五、方案优势一、功能需求分析需要实现以下核心功能&#x…...

编程日记 2025/9/19 1:48:34

AI工具篇：利用DeepSeek+Kimi 辅助生成综述汇报PPT

随着科研和学术报告需求的增加，如何高效地准备一份结构清晰、内容充实的PPT已成为许多研究者的挑战。传统的PPT制作过程繁琐，需要大量文献收集、数据分析和设计工作，而AI工具能够帮助提升效率，减少重复劳动。本文将介绍如何使用…...

编程日记 2025/9/18 9:32:18

审计级别未启用扩展模式导致查询 DBA_AUDIT_TRAIL 时 SQL_TEXT 列为空

如果查询 DBA_AUDIT_TRAIL 时发现 SQL_TEXT 列为空，但其他字段（如 OS_USERNAME、USERNAME、TIMESTAMP 等）有数据，可能是由于以下原因之一。以下是可能的原因及解决方法： 1. 审计级别未启用扩展模式默认情况下&#x…...

编程日记 2025/9/17 20:21:47

HTTP 和RESTful API 基础，答疑

一文搞懂RESTful API - bigsai - 博客园 1. API 路径开头必须 /，表示绝对路径，不支持 . 或 ..（相对路径）。API 结尾 / 通常不需要，但部分框架会自动处理 / → 无 /。 ✅ 推荐 GET /api/v1/products # 资源集合…...

编程日记 2025/9/17 11:34:01

手写简易RPC（实践版）

首先了解rpc rpc-远程过程调用，openFeign，Dubbo都可以算作rpc，以微服务来具体说明，就是在本地不需要去发送请求，通过rpc框架，像调用本地方法一样调用其他服务的方法，本质上还是要经过网络&…...

编程日记 2025/9/17 11:34:00

Day6 25/2/19 WED

【一周刷爆LeetCode，算法大神左神（左程云）耗时100天打造算法与数据结构基础到高级全家桶教程，直击BTAJ等一线大厂必问算法面试题真题详解（马士兵）】https://www.bilibili.com/video/BV13g41157hK?p4&v…...

编程日记 2025/9/18 21:21:49

【DL】浅谈深度学习中的知识蒸馏 | 输出层知识蒸馏

目录一核心概念与背景二输出层知识蒸馏 1 教师模型训练 2 软标签生成（Soft Targets） 3 学生模型训练三扩展 1 有效性分析 2 关键影响因素 3 变体一核心概念与背景知识蒸馏（Knowledge Distillation, KD）是一种模…...

编程日记 2025/9/18 11:46:17

机器学习PCA和LDA

主成分分析（PCA, Principal Component Analysis）和线性判别分析（LDA, Linear Discriminant Analysis）是两种常用的降维方法，它们虽然都用于数据降维，但核心思想和应用场景不同。 PCA（主成分分析…...

编程日记 2025/9/19 9:14:18

tcp协议连接，和传输数据

1、连接这个是通用的 2、传送数据当连接建立后，客户端和服务器都可以主动发送数据，分别如下 1》客户端先发送数据这里是单向的，服务器没有对客户端的数据内容进行应答，只是单纯的对报文应答ack 2》服务器先发送数据...

编程日记 2025/9/18 3:13:36

【异常错误】pycharm debug view变量的时候显示不全，中间会以...显示

异常问题： 这个是在新版的pycharm中出现的，出现的问题，点击view后不全部显示，而是以...折叠显示在setting中这么设置一下就好了： 解决办法： https://youtrack.jetbrains.com/issue/PY-75568/Large-stri…...

编程日记 2025/9/17 0:01:21

Java基础——代理模式

代理模式是一种比较好理解的设计模式。简单来说就是我们使用代理对象来代替对真实对象(real object)的访问，这样就可以在不修改原目标对象的前提下，提供额外的功能操作，扩展目标对象的功能。一、代理模式的主要作用控制访问：通…...

编程日记 2025/9/19 18:18:57

解锁机器学习核心算法｜主成分分析（PCA）：降维的魔法棒

一、引言在机器学习的庞大算法体系中，有十种算法被广泛认为是最具代表性和实用性的，它们犹如机器学习领域的 “十大神器”，各自发挥着独特的作用。这十大算法包括线性回归、逻辑回归、决策树、随机森林、K - 近邻算法、K - 平均算法、支持向…...

编程日记 2025/9/18 16:07:34

sql注入漏洞

目录一、SQL注入概述例子背景正常情况下的查询 SQL注入攻击利用优先级进行攻击二、解决SQL注入使用PreparedStatement接口步骤和方法 1. 创建PreparedStatement对象 2. 向占位符传入值 3. 执行SQL语句示例总结 SQL 注入是一种常见的网络攻击手段。通俗来…...

编程日记 2025/9/17 2:44:16

spring微服务+dubbo框架，某一服务启动时提示多个bean存在

在java的springboot项目中使用DubboService的注解的实现类中，在引用本模块的类时，使用的DubboRefrence注解，在启动项目时报错，提示该类需要以一个bean对象，但是存在了两个，把DubboRefrence的注解改成Autowi…...

编程日记 2025/9/18 22:52:32

React useState 和 useEffect 使用坑点注意总结

React Hooks 使用注意事项 Area: Hooks Date: February 10, 2025 Important: 🌟🌟🌟 React Hooks 注意事项要点： useState 的初始化值只在第一次渲染时计算，并且这个值不会随着组件重新渲染而更新。useEffect 可…...

编程日记 2025/9/17 1:24:07

使用rknn进行yolo11-pose部署

文章目录概要生成ONNX生成RKNN实测效果概要使用 RKNN 进行 YOLOv11 Pose 部署的必要性在于，RKNN 能将 YOLOv11 Pose 模型转化为适合 Rockchip 硬件平台（如 RV1109、RV1126）执行的格式，充分利用其 AI 加速功能，显著提高推理速度和效率。此外，RKNN 提供模型优化（如量化…...

编程日记 2025/9/18 13:29:44

开源语音克隆项目 OpenVoice V2 本地部署

#本机环境 WIN11 I5 GPU 4060ti 16G 内存 32G #开始 git clone https://github.com/myshell-ai/OpenVoice.git conda create -n opvenv python3.9 -y conda activate opvenv pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/…...

编程日记 2025/9/19 1:51:41

YOLOv12从入门到入土(含结构图)

论文链接：https://arxiv.org/abs/2502.12524 代码链接：https://github.com/sunsmarterjie/yolov12 文章摘要： 长期以来，增强YOLO框架的网络架构一直至关重要，但一直专注于基于cnn的改进，尽管注意力机制在建…...

编程日记 2025/9/17 11:33:47

8.【线性代数】——求解Ax=b

八求解Axb 1. 解Axb求特解 x p x_p xp求特解 x n x_n xn所有解 2. Axb什么时候有解3. A m ∗ n A_{m * n} Am∗n不同秩的Axb解分析3.1 列满秩 rn<m3.2 行满秩 rm<n3.3 rmn3.4 r<m 且 r < n3.5 综述 1. 解Axb 求解 { x 1 2 x 2 2 x 3 2 x 4 b 1 2 x 1…...

编程日记 2025/9/18 19:43:19

【Quest开发】全身跟踪

软件：Unity 2022.3.51f1c1、vscode、Meta XR All in One SDK V72 硬件：Meta Quest3 最终效果：能像meta的操作室沉浸场景一样根据头盔移动来推断用户姿势，实现走路、蹲下、手势匹配等功能需要借助UnityMovement这个包 GitHub …...

编程日记 2025/9/18 20:05:32

Spring Boot 示例项目：从零开始构建 Web 应用

一、项目概述本文档将指导您通过一个示例项目，了解如何使用 Spring Boot 框架构建一个简单的 Web 应用程序。该项目涵盖了从数据模型定义到控制器、服务层以及数据访问层的完整开发流程，帮助您快速掌握 Spring Boot 的基本使用方法。二、项目结构 1. 项目模块本示例项…...

编程日记 2025/9/16 12:30:04

事件

合成e

事件委托到容器

传参处理

箭头函数和高阶函数

根据不同的条件渲染不同内容

相关文章：