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

useRef总结

一、使用ref引用值

        在react中ref的主要用途是用来获取DOM元素或者某个组件实例的引用。当你想访问真实的DOM节点,或者需要在组件之间共享可变数据且不需要触发重新渲染时,通常会使用ref。在vue中ref是响应式的,当数据发生改变时,相关的视图会自动更新。但在react中不是响应式的。

二、给组件添加 ref

可以通过从 React 导入 useRef Hook 来为组件添加一个 ref:

import { useRef } from 'react';

在组件内,调用 useRef Hook 并传入你想要引用的初始值作为唯一参数。例如,这里的 ref 引用的值是“0”:

const ref = useRef(0);

useRef 返回一个这样的对象:

{ current: 0 // 你向 useRef 传入的值
}

你可以用 ref.current 属性访问该 ref 的当前值。这个值既可以读取它也可以写入它。

三、何时使用 

  • 存储和操作 DOM 元素
  • 存储不需要被用来计算 JSX 的其他对象。
  • 如果你的组件需要存储一些值,但不影响渲染逻辑,请选择 ref

四、使用实例 

文本输入框获得焦点 
import { useRef } from 'react';export default function Form() {const inputRef = useRef(null);function handleClick() {inputRef.current.focus();}return (<><input ref={inputRef} /><button onClick={handleClick}>发布</button></>);
}

点击完发布按钮,输入框会获得焦点

相关文章:

useRef总结

一、使用ref引用值 在react中ref的主要用途是用来获取DOM元素或者某个组件实例的引用。当你想访问真实的DOM节点&#xff0c;或者需要在组件之间共享可变数据且不需要触发重新渲染时&#xff0c;通常会使用ref。在vue中ref是响应式的&#xff0c;当数据发生改变时&#xff0c;相…...

计算机网络知识等汇总补充

计算机网络知识汇总补充 一、四次挥手1、为什么TCP要等待2MSL2、如果说一个系统中&#xff0c;有大量的time_wait和close_wait&#xff0c;会是什么原因&#xff1f; 二、你是怎么解决粘包问题&#xff1f;三、你觉得哪些场景适合redis四、redis的持久化策略五、你会怎么保证my…...

word中插入mathtype版的符号后,行间距变大解决方法

问题 解决方法 选中该段&#xff0c;设置固定值行距。如果是宋体&#xff0c;小四&#xff0c;1.25行距&#xff0c;那么固定值就为20磅。 成功解决。...

怎么给html文件本地启动一个服务去访问

首先得先安装node 要启动一个本地的 HTTP 服务器&#xff0c;请先安装 Node.js&#xff0c;然后通过命令行在 HTML 文件所在文件夹下运行 npx serve...

LabVIEW无线快速存取记录器(WQAR)测试平台

LabVIEW无线快速存取记录器&#xff08;WQAR&#xff09;测试平台 随着民用航空业的迅速发展&#xff0c;航空安全的保障日益成为公众和专业领域的关注焦点。无线快速存取记录器&#xff08;WirelessQuick Access Recorder, WQAR&#xff09;作为记录飞行数据、监控飞行品质的…...

12-pyspark的RDD算子注意事项总结

目录 相近算子异同总结相近变换算子异同foreach和foreachPartitionfold和reducecoalesce和repatition 相近动作算子异同cache和persist 算子注意事项需要注意的变换算子需要注意的动作算子 PySpark实战笔记系列第三篇 10-用PySpark建立第一个Spark RDD(PySpark实战笔记系列第…...

设备基础命令,路由基础

直连路由 静态路由 动态路由 根据路由器学习路由信息、生成并维护路由表的方法包括直连路由(Direct)、静态路由(Static)和动态路由(Dynamic)。直连路由&#xff1a;路由器接口所连接的子网的路由方式称为直连路由&#xff1b;非直连路由&#xff1a;通过路由协议从别的路由器…...

golang context

作用&#xff1a;用于在go协程中 传递上下文、超时、取消、传值 底层实现&#xff1a;是由互斥锁、channel、map来实现的 互斥锁&#xff1a;保护临界资源 channel: 用于信号通知&#xff0c;比如ctx.Done() map: 保存父ctx下派生的所有子ctx, 父ctx关闭&#xff0c;子ctx都关…...

GPT中的Transformer架构以及Transformer 中的注意力机制

目录 1 GPT中的Transformer架构 2 transformer中的注意力机制 参考文献&#xff1a; 看了两个比较好的视频&#xff0c;简单做了下笔记。 1 GPT中的Transformer架构 GPT是Generative Pre-trained Transformer单词的缩写&#xff0c;其中transformer是一种特定的神经网络&a…...

Hive的简单学习二

一Hive 库的基本操作 1.1 建库 1.默认路径是/user/hive/warehouse 例如 我输入命令 create database text1 则text1出现在 warehouse目录下 2.指定位置创建数据库 create database text2 location /bigdata29/bigdata29db 后面的路径是hdfs的路径 3.最终写法 加上if n…...

Qt事件处理机制3-事件函数的分发

Qt开发中&#xff0c;经常重写event函数和具体的事件处理函数&#xff0c;例如mousePressEvent、paintEvent等&#xff0c;那么这些具体的事件处理函数是怎样被调用的呢&#xff1f;答案是由继承自QObject的类中的event函数来处理事件分发。这里以间接继承自QWidget的派生类MyB…...

4月9号总结

java学习 一.steam流 1.介绍 Stream 是 Java 8 中引入的一种处理集合数据的新抽象。它提供了一种高效且便利的方式来处理集合中的元素&#xff0c;支持函数式编程的特性&#xff0c;使得集合操作变得更加简洁和灵活。 2.创建 List和Set可以直接调用接口的steam方法转换为流 …...

Linux生态系统:探索Linux的开源世界

Linux生态系统:探索Linux的开源世界 在前面的博客中,我们深入探讨了Linux的各种技能和技巧,从入门到进阶,再到高手级别。这一路走来,相信大家对Linux已经有了全面的认识和掌握。然而,Linux的魅力远不止于此。今天,我们将进一步探索Linux生态系统,了解Linux在开源世界中的重要地…...

XILINX 10G PCS PMA IP核使用

文章目录 一、设计框图二、模块设计三、IP核配置四、上板验证五、总结 一、设计框图 关于GT高速接口的设计一贯作风&#xff0c;万兆以太网同样如此&#xff0c;只不过这里将复位逻辑和时钟逻辑放到了同一个文件ten_gig_eth_pcs_pma_0_shared_clock_and_reset当中。如果是从第…...

Scrapy框架内存泄漏问题及解决

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、问题背景及原因 官方文档&#xff1a;Debugging memory leaks — Scrapy 2.11.1 documentation Scrapy是一款功能强大的网络爬虫框…...

app 创建快捷入口 在手机上面多个icon

activity-alias详解及应用-CSDN博客 Android动态修改应用图标最佳实践 - 简书 AndroidManifest.xml 中 <activity-aliasandroid:name"包名.ui.mine.SecondActivityAlias"android:label"快捷入口"android:icon"mipmap/collection_one"andro…...

【网安小白成长之路】6.pkachu、sql-lbas、upload-lbas靶场搭建

&#x1f42e;博主syst1m 带你 acquire knowledge&#xff01; ✨博客首页——syst1m的博客&#x1f498; &#x1f51e; 《网安小白成长之路(我要变成大佬&#x1f60e;&#xff01;&#xff01;)》真实小白学习历程&#xff0c;手把手带你一起从入门到入狱&#x1f6ad; &…...

vue 项目中添加DES加密

vue 项目中添加DES加密 由于现在项目使用http协议&#xff0c;且登录界面是明文传输&#xff0c;项目真正上线后基本的密码传输都很不安全。 决定用前端框架加密后再进行传输&#xff0c;以提高密码传输过程中的安全性。 crypto-js 是一个流行的 JavaScript 加密库&#xff0…...

【记录问题】如何测试虚拟机已经可以连接网络

如何测试虚拟机已经可以连接网络 要测试虚拟机是否已经连接网络&#xff0c;可以采取以下步骤&#xff1a; 检查虚拟网络编辑器 使用管理员权限打开虚拟网络编辑器&#xff0c;检查NAT方式下的虚拟子网网段。 确保虚拟机的网络设置与虚拟子网网段相匹配。检查虚拟机网络设置 …...

MySQL数据库的详解(1)

DDL&#xff08;数据库操作&#xff09; 查询 查询所有数据库&#xff1a;show databases;当前数据库&#xff1a;select database(); 创建 创建数据库&#xff1a;create database [ if not exists] 数据库名 ; 使用 使用数据库&#xff1a;use 数据库名 ; 删除 删除数…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...