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

react中hooks之useId用法总结以及与useRef用法区别

news 来源：原创 2025/6/9 19:42:50

React useId Hook 使用指南

概述

useId 是 React 18 引入的新 Hook，用于生成唯一的 ID，主要用于可访问性（accessibility）属性。它在服务端和客户端渲染时都能保持一致性。

useId vs useRef

useId: 生成稳定的唯一标识符，主要用于 HTML 属性关联
useRef: 存储可变值的容器，主要用于保存引用和状态

基本用法

1. useId 基础示例

function FormField() {const id = useId();return (<div><label htmlFor={id}>Name:</label><input id={id} type="text" /></div>);
}

2. 多个关联 ID

function ComplexForm() {const id = useId();return (<form><div><label htmlFor={`${id}-name`}>Name:</label><input id={`${id}-name`} type="text" /></div><div><label htmlFor={`${id}-email`}>Email:</label><input id={`${id}-email`} type="email" /></div></form>);
}

3. ARIA 属性使用

function Accordion() {const id = useId();return (<div><button aria-controls={`${id}-content`}aria-expanded="false">Toggle</button><div id={`${id}-content`}aria-labelledby={`${id}-header`}>Content</div></div>);
}

useId vs useRef 对比

1. 用途区别

// useId: 生成稳定的 ID
function AccessibleInput() {const id = useId();return (<div><label htmlFor={id}>Input:</label><input id={id} /></div>);
}// useRef: 保存元素引用或可变值
function FocusInput() {const inputRef = useRef<HTMLInputElement>(null);const focus = () => {inputRef.current?.focus();};return (<div><input ref={inputRef} /><button onClick={focus}>Focus</button></div>);
}

2. 生命周期差异

// useId: 组件整个生命周期保持稳定
function StableId() {const id = useId();// id 在重渲染时保持不变return <div id={id}>{id}</div>;
}// useRef: 可以随时更新值
function Counter() {const countRef = useRef(0);const increment = () => {countRef.current += 1;  // 更新值不会触发重渲染console.log(countRef.current);};return <button onClick={increment}>Increment</button>;
}

3. 服务端渲染考虑

// useId: 服务端和客户端保持一致
function ServerComponent() {const id = useId();// 在 SSR 和客户端渲染中生成相同的 IDreturn <div id={id}>Content</div>;
}// useRef: 主要用于客户端
function ClientComponent() {const elementRef = useRef<HTMLDivElement>(null);// ref 在服务端渲染时为 nulluseEffect(() => {console.log(elementRef.current);  // 仅在客户端可用}, []);return <div ref={elementRef}>Content</div>;
}

最佳实践

1. 可访问性组件

function AccessibleDialog() {const id = useId();return (<div><button aria-haspopup="dialog"aria-controls={`${id}-dialog`}>Open Dialog</button><divrole="dialog"id={`${id}-dialog`}aria-labelledby={`${id}-title`}aria-describedby={`${id}-desc`}><h2 id={`${id}-title`}>Dialog Title</h2><p id={`${id}-desc`}>Dialog description</p></div></div>);
}

2. 表单控件关联

function FormGroup({ label, type = "text" }) {const id = useId();const errorId = `${id}-error`;const descriptionId = `${id}-description`;return (<div><label htmlFor={id}>{label}</label><inputid={id}type={type}aria-describedby={`${descriptionId} ${errorId}`}/><span id={descriptionId}>Help text</span><span id={errorId} role="alert"></span></div>);
}

使用建议

useId 适用场景:
- HTML 元素 ID 生成
- ARIA 属性关联
- 表单标签关联
- 需要服务端渲染一致性的场景
useRef 适用场景:
- DOM 元素引用
- 存储可变值
- 计时器/订阅的引用
- 需要在不触发重渲染的情况下更新值
选择建议:
- 需要稳定的唯一标识符时使用 useId
- 需要存储可变引用时使用 useRef
- 考虑服务端渲染需求
- 考虑可访问性需求

总结

useId 特点:
- 生成稳定的唯一标识符
- 服务端渲染兼容
- 适合可访问性属性
- 组件级别的唯一性
useRef 特点:
- 存储可变值
- 不触发重渲染
- 适合 DOM 引用
- 组件内部状态管理
使用场景区分:
- HTML/ARIA 属性关联用 useId
- DOM 操作和可变值存储用 useRef
- 考虑渲染一致性需求
- 考虑值更新特性

react中hooks之useId用法总结以及与useRef用法区别

React useId Hook 使用指南概述 useId 是 React 18 引入的新 Hook，用于生成唯一的 ID，主要用于可访问性（accessibility）属性。它在服务端和客户端渲染时都能保持一致性。 useId vs useRef useId: 生成稳定的唯一标识符&#…...

编程日记 2025/6/1 0:29:54

Spring Boot AOP实现动态数据脱敏

依赖&配置  <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>/*** Author: 说淑人* Date: 2025/1/18 23:03* Desc…...

编程日记 2025/6/4 8:02:00

AutoGen入门——快速实现多角色、多用户、多智能体对话系统

1.前言如https://github.com/microsoft/autogen所述，autogen是一多智能体的框架，属于微软旗下的产品。依靠AutoGen我们可以快速构建出一个多智能体应用，以满足我们各种业务场景。本文将以几个示例场景，使用AutoGen快速构建出…...

编程日记 2025/6/4 6:56:10

.NET Framework

.NET Framework 是微软推出的一个软件开发平台，主要用于构建和运行 Windows 应用程序。它是 .NET 生态系统的早期版本，专注于 Windows 平台，并提供了丰富的类库和运行时环境。注意事项跨平台限制：.NET Framework 主要适用于 W…...

编程日记 2025/6/4 6:55:54

算法中的移动窗帘——C++滑动窗口算法详解

1. 滑动窗口简介滑动窗口是一种在算法中常用的技巧，主要用来处理具有连续性的子数组或子序列问题。通过滑动窗口，可以在一维数组或字符串上维护一个固定或可变长度的窗口，逐步移动窗口，避免重复计算，从而提升效率。常…...

编程日记 2025/6/4 6:57:49

DuckDB：Golang操作DuckDB实战案例

DuckDB是一个嵌入式SQL数据库引擎。它与众所周知的SQLite非常相似，但它是为olap风格的工作负载设计的。DuckDB支持各种数据类型和SQL特性。凭借其在以内存为中心的环境中处理高速分析的能力，它迅速受到数据科学家和分析师的欢迎。在这篇博文中&#xff0…...

编程日记 2025/6/3 16:50:23

C++通过输入3D相机像素点集{u、v、z}和机械手世界坐标点集{X、Y、Z}求得变换矩阵RT（眼在手外）

👑主页：吾名招财 👓简介：工科学硕，研究方向机器视觉，爱好较广泛… 💫签名：面朝大海，春暖花开！ C++通过输入3D相机像素点集{u、v、z}和机械手世界坐标点集{X、Y、Z}求得变换矩阵RT（眼在手外）引言原理简介点集数据（含像素坐标、世界坐标及求解后的变换矩阵）配…...

编程日记 2025/6/3 8:52:56

手机怎么远程操控电脑？

远程看看是一款免费使用的远程控制软件，兼容 Windows、iOS 和 Android 系统，用户可以通过电脑或移动设备轻松远程控制电脑。不仅如此，远程看看还提供了文件传输、在线聊天和隐私屏等实用功能。如果您需要在远程操作时隐藏被控电脑的操作界面&…...

编程日记 2025/6/4 6:56:27

【Golang/gRPC/Nacos】在golang中将gRPC和Nacos结合使用

Nacos与gRPC 前言关于这部分，前段时间我在看文档以及视频教程的时候，怎么都想不明白，到底为什么要用gRPC是什么，他在项目中应该充当什么样的角色？Nacos又是如何和他结合的？ 于是我就决定去看看一些小项…...

编程日记 2025/6/3 6:58:01

数据库-多表关系

项目开发中，在进行数据库表结构设计时，会根据业务需求及业务模块之间的关系，分析并设计表结构。由于业务之间相互关联，所以各个表结构之间也存在着各种联系。多表关系： 一对多(多对一) 一对一多对多多表关系一对…...

编程日记 2025/6/4 6:57:32

回归算法、聚类算法、决策树、随机森林、神经网络

这也太全了！回归算法、聚类算法、决策树、随机森林、神经网络、贝叶斯算法、支持向量机等十大机器学习算法一口气学完！_哔哩哔哩_bilibili 【线性回归、代价函数、损失函数】动画讲解_哔哩哔哩_bilibili 14分钟详解所有机器学习算法：…...

编程日记 2025/6/4 6:56:43

RabbitMQ1-消息队列

目录 MQ的相关概念什么是MQ 为什么要用MQ MQ的分类 MQ的选择 RabbitMQ RabbitMQ的概念四大核心概念 RabbitMQ的核心部分各个名词介绍 MQ的相关概念什么是MQ MQ(message queue)，从字面意思上看，本质是个队列，FIFO 先入先出&am…...

编程日记 2025/6/4 6:57:15

第17章：Python TDD回顾与总结货币类开发

写在前面这本书是我们老板推荐过的，我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后，我突然思考，对于测试开发工程师来说，什么才更有价值呢？如何让 AI 工具更好地辅助自己写代码，或许…...

编程日记 2025/6/3 10:16:36

7、数组知识点汇总

一、数组基本概念程序算法数据结构算法：解决程序的流程步骤数据结构：将数据按照某种特定的结构来存储设计良好的数据结构会导致良好的算法。ArrayList、LinkedList 数组是最简单的数据结构。 1、数组： 数组：存放同一种类型…...

编程日记 2025/6/4 7:03:44

蓝桥杯c/c++需要掌握的基础语法总结

1、#include<bits/stdc.h> 万能头文件 2、using namespace std； 3、输出 cout<<""<<end1; (换行) printf(""); 4、int x3；整数 double d3.14；小数 char ch’A‘;字符 char s[]"Hell…...

编程日记 2025/6/4 7:05:53

学习第七十四行

qt调用信号与槽机制： MOC查找头文件中的signal与slots，标记出信号槽。将信号槽信息储存到类静态变量staticMetaObject中，并按照声明的顺序进行存放，建立索引。connect链接，将信号槽的索引信息放到一个双向链表中&…...

编程日记 2025/6/4 7:05:21

《罗宾逊-旅途VR》Build2108907官方学习版

《罗宾逊-旅途VR》官方版 https://pan.xunlei.com/s/VODiY5gn_fNxKREdVRdwVboCA1?pwdsh3f# 从第一人称的角度进行探索，玩家将遇到一系列恐龙和生物，这些恐龙和生物会对它们在泰森三世生态系统中的存在做出反应。强调与周围环境的互动，鼓励玩…...

编程日记 2025/6/4 7:05:37

详解共享WiFi小程序怎么弄！

在数字化时代，共享WiFi项目正逐渐成为公共场所的新标配，它不仅为用户提供了便捷的上网方式，还为商家带来了额外的收入来源。那么共享wifi怎么弄，如何搭建并运营一个成功的共享WiFi项目呢？ 共享WiFi项目通过在公共场所…...

编程日记 2025/6/4 7:04:16

Glide加载gif遇到的几个坑

Glide本身支持gif格式的动画加载，但是大多数情况下我们用Glide都是去加载一些静态图片，加载gif动态图的需求不是很多，因此这次使用Glide加载gif就遇到了一些令人匪夷所思的问题问题一：加载gif图片会有明显的卡顿通常情况下我们…...

编程日记 2025/6/4 7:04:49

mybatis（19/134）

大致了解了一下工具类，自己手敲了一边，java的封装还是真的省去了很多麻烦，封装成一个工具类就可以不用写很多重复的步骤，一个工厂对应一个数据库一个environment就好了。 mybatis中调用sql中的delete占位符里面需要有字符&#xf…...

编程日记 2025/5/26 13:43:27

部分“古董机”编程读取文件时出现文件损坏的简易处理办法(简单粗暴) - 随笔

在部分老旧计算机（通常被戏称为“古董机”）上编程，读取文件时可能会遇到文件损坏的问题。这通常是由于硬件性能限制或操作系统的文件处理机制导致的。本文将介绍几种简易的处理办法，以解决或绕过这一问题。方法1. 调整磁盘关闭时…...

编程日记 2025/6/4 7:04:33

StarRocks 3.4 发布--AI 场景新支点，Lakehouse 能力再升级

自 StarRocks 3.0 起，社区明确了以 Lakehouse 为核心的发展方向。Lakehouse 的价值在于融合数据湖与数据仓库的优势，能有效应对大数据量增长带来的存储成本压力，做到 single source of truth 的同时继续拥有极速的查询性能，同时也…...

编程日记 2025/6/4 7:05:05

强化学习入门--基本概念

强化学习基本概念 grid-world example 这个指的是一个小机器人（agent）在一个网格区域（存在边界），网格中存在需要躲避的格子和目标格子，我们的目的就是找到到达目标格子的最短路径 state 表示智能体相对…...

编程日记 2025/5/27 20:38:06

Oracle 创建并使用外部表

目录一. 什么是外部表二. 创建外部表所在的文件夹对象三. 授予访问外部表文件夹的权限3.1 DBA用户授予普通用户访问外部表文件夹的权限3.2 授予Win10上的Oracle用户访问桌面文件夹的权限四. 普通用户创建外部表五. 查询六. 删除一. 什么是外部表在 Oracle 数据库中&#x…...

编程日记 2025/6/4 17:47:03

深度学习python基础(第三节) 函数、列表

本节主要介绍函数、列表的基本语法格式。函数与c语言的函数差不多，就是语法基本格式不同。 name "loveyou" length len(name) print("字符串的长度为：%d" % length) # 自定义函数 def countstr(data):count 0for i in da…...

编程日记 2025/6/1 18:20:14

基于Python的多元医疗知识图谱构建与应用研究（上）

一、引言 1.1 研究背景与意义在当今数智化时代，医疗数据呈爆发式增长，如何高效管理和利用这些数据，成为提升医疗服务质量的关键。传统医疗数据管理方式存在数据孤岛、信息整合困难等问题，难以满足现代医疗对精准诊断和个性化治疗的需求。知识图谱作为一种知识表示和管理…...

编程日记 2025/6/2 2:56:21

Spring Boot 快速创建项目

目录一. 创建项目编辑二. 项目目录三. 运行项目 (1) 启动项目 (2) 输出HelloWorld 一. 创建项目我们以idea专业版为例创建Spring项目: 步骤: (1) File --> New --> Project (2) 配置项目基本信息 (3) 依赖: 需要什么就勾选什么. 我们这里就只勾选一个Spri…...

编程日记 2025/6/2 10:27:36

MySQL预编译语句过多告警排查

业务背景在使用Spring Cloud Alibaba搭建的微服务架构中，项目采用ShardingSphere进行分库分表，MyBatis-Plus作为持久层。线上环境突发大量预编译语句过多的数据库告警，导致系统性能下降。排查过程 1. 初步排查：联系云数据库厂…...

编程日记 2025/6/4 1:01:42

在centos上编译安装opensips【初级-默认安装】

环境：centos9 last opensips3.2 dnf update -y dnf install -y gcc make git automake libtool pcre-devel libxml2-devel \libcurl-devel postgresql-devel \bzip2-devel zlib-devel ncurses-devel libuuid-devel \libpcap-devel # 有报错的直接删除cd /usr/lo…...

编程日记 2025/6/3 9:07:17

偏序关系.

一、偏序（半序）关系偏序关系自反反对称传递性二、全序（线序、链）关系三、偏序集中的重要元素 1. 极大元与极小元极大元找所在集合的一个或几个最高点； 极小元找所在集合的一个或几个最低点。 2. 最大元与最小…...

编程日记 2025/6/1 23:56:14

Node.js接收文件分片数据并进行合并处理

前言：上一篇文章讲了如何进行文件的分片：Vue3使用多线程处理文件分片任务，那么本篇文章主要看一下后端怎么接收前端上传来的分片并进行合并处理。目录： 一、文件结构二、主要依赖1. express2. multer3. fs (文件系统模块)4. pat…...

编程日记 2025/6/3 16:24:15

设计模式概述 - 设计模式的重要性

引言设计模式是软件工程中用于解决常见设计问题的经典解决方案。它们提供了一种标准化的方式来组织和设计代码，使得代码更易于理解、维护和扩展。在C编程中，设计模式尤为重要，因为它们可以帮助开发者应对复杂的系统设计，提高代码…...

编程日记 2025/6/3 21:42:57

OSI5GWIFI自组网协议层次对比

目录 5G网络5G与其他协议栈各层映射 5G网络物理层 (PHY) 是 5G 基站协议架构的最底层，负责将数字数据转换为适合无线传输的信号，并将接收到的无线信号转换为数字数据。实现数据的编码、调制、多天线处理、资源映射等操作。涉及使用新的频段&#xff08…...

编程日记 2025/6/1 2:18:18

网络安全（渗透）

目录名词解释 2、相互关系 3. 安全影响名词解释 1、poc、exp、payload与shellcode POC（Proof of Concept）： 是一种概念验证代码或演示程序，用于证明漏洞的存在。主要目的是通过简单的代码或操作向安全研究人员、开发人员…...

编程日记 2025/6/4 1:28:25

Whisper-GPT：混合表征音频大语言模型

Whisper-GPT：混合表征音频大语言模型当下，利用从神经压缩算法（例如#Encodec#）派生的离散音频标记的生成式音频、语音以及音乐模型数量激增。然而，这种方法的主要缺陷之一在于对上下文长度的处理。如果必须考虑所有不同频率的音频内容才能进行下一个标记预测，那么高保…...

编程日记 2025/6/2 23:42:43

科技重塑未来：前沿技术趋势、跨领域融合与社会影响深度洞察

目录科技重塑未来：前沿技术趋势、跨领域融合与社会影响深度洞察引言一、前沿技术趋势洞察与分析1. 人工智能与自动化1.1 趋势分析1.2 挑战分析 2. 区块链技术2.1 趋势分析2.2 挑战分析 3. 量子计算3.1 趋势分析3.2 挑战分析二、跨领域技术融合与创新实践1. AI与大…...

编程日记 2025/6/2 23:41:50

深度学习：大模型Decoding+MindSpore NLP分布式推理详解

大模型推理流程 1. 用户输入提示词（Prompt） 假设用户输入为：“从前，有一只小猫，它喜欢……” 我们的目标是让模型生成一段完整的故事。 2. 模型处理用户输入 2.1 分词：输入提示被分词为模型可以理解的…...

编程日记 2025/6/2 23:42:24

GESP6级语法知识（二）：动态规划算法（二）

最小路径和; //最小路径和 #include<iostream> using namespace std; const int N100; int dp[N][N],value[N][N]; int n,m; int main() {cin>>n>>m;for(int i1;i<n;i) //录入初始数字矩阵 for(int j1;j<m;j)cin>>value[i][j];for(int i1;i…...

编程日记 2025/6/4 17:20:29

数据结构与算法之递归: LeetCode 79. 单词搜索 (Ts 版)

单词搜索 https://leetcode.cn/problems/word-search/description/ 描述给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中，返回 true ；否则，返回 false 单词必须按照字母顺序，通过相邻的单…...

编程日记 2025/6/2 23:41:34

智能系统的感知和决策

智能系统在感知和决策过程中具备的关键能力表现在智能感知/自主判定上，下面可以从感知的本质、自主判断的含义及其在智能系统中的作用进行深入分析。 1、智能感知：信息获取与理解智能感知是指智能系统通过传感器或其他数据采集手段获取环境中的信息&…...

编程日记 2025/6/2 18:01:03

多线程之旅：线程安全问题

之前说到了多线程的创建和一些属性等等，接下来，就来讲讲多线程安全问题。小编引入这段代码讲解下： public class Demo13 {public static int count0;public static void main(String[] args) throws InterruptedException {Thread t1new…...

编程日记 2025/6/2 5:38:30

用java配合redis 在springboot上实现令牌桶算法

令牌桶算法配合 Redis 在 Java 中的应用令牌桶算法是一种常用的限流算法，适用于控制请求的频率，防止系统过载。结合 Redis 使用可以实现高效的分布式限流。一.、引入依赖首先，需要在 pom.xml 文件中引入 spring-boot-starter-data-re…...

编程日记 2025/6/4 11:17:19

科学计算库NumPy

NumPy是高性能科学计算和数据分析的基础包。认识NumPy数据对象 n维数组对象ndarray(array) 数组是编程语言中重要且复杂的数据结构，它是由相同类型元素按照一定的顺序排列的集合。ndarray具有矢量算术能力和复杂的广播能力。 - 维度又称为维数，在数学…...

编程日记 2025/6/3 5:14:57

【大数据】机器学习----------强化学习机器学习阶段尾声

一、强化学习的基本概念注： 圈图与折线图引用知乎博主斜杠青年 1. 任务与奖赏任务：强化学习的目标是让智能体（agent）在一个环境（environment）中采取一系列行动（actions）以完成一个…...

编程日记 2025/6/3 15:02:33

Unicode不可见字符

场景复现在访问 https://dotnet.microsoft.com/zh-cn/apps/aspnet地址时突然出现 https://dotnet.microsoft.com/zh-cn/apps/aspnet%E2%80%8C%E2%80%8C 但是正常来看，这个地址后面是没有%E2%80%8C%E2%80%8C的，粘贴到idea里发现了url地址后面还拼接了2…...

编程日记 2025/6/3 15:04:57

w172二手车交易系统的设计与实现

🙊作者简介：多年一线开发工作经验，原创团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文…...

编程日记 2025/6/3 15:03:37

TRELLIS微软的图生3D

TRELLIS 教程目录： Youtube：https://www.youtube.com/watch?vJqFHZ-dRMhI 官网地址：https://trellis3d.github.io/ GitHub：https://github.com/Microsoft/TRELLIS 部署目录： 克隆项目 git clone --recurse-submodul…...

编程日记 2025/6/4 17:25:17