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

3.react useRef使用与常见问题

news 2026/2/3 20:13:30

react useRef使用与常见问题

文章目录

  • react useRef使用与常见问题
    • 1. Dom操作: useRef()
    • 2. 函数组件的转发: React.forwardRef()
    • 3. 对普通值进行记忆, 类似于一个class的实例属性
    • 4. 结合useEffect,只在更新时触发
    • FAQ

1. Dom操作: useRef()

    // 1. Dom操作: useRef()let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef } = React;let Welcome = (props) => {const myRef = useRef()const handleClick = () =>{myRef.current.focus()}return (<div><button onClick={handleClick}>点击</button><input ref={myRef} type='text' /></div>);}let element = (<Welcome />);root.render(element);

2. 函数组件的转发: React.forwardRef()

      // 2. 函数组件的转发: React.forwardRef()let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef, forwardRef } = React;let Head = forwardRef((props, ref)=> {return (<div>hello Head{/*将 ref 转发到子组件的input上 */}<input ref={ref} type='text' /></div>)})let Welcome = (props) => {const myRef = useRef()const handleClick = () =>{// 点击时候会触发子组件的focus事件myRef.current.focus()}return (<div><button onClick={handleClick}>点击</button>{/*ref 和组件关联*/}<Head ref={myRef}></Head></div>);}let element = (<Welcome />);root.render(element);

3. 对普通值进行记忆, 类似于一个class的实例属性

 // 3. 对普通值进行记忆, 类似于一个class的实例属性let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef } = React;let Welcome = (props) => {// 响应式数据,具有记忆功能,点击后响应式数据加1const [num, setNum] = useState(0);// let count = 0; // 普通的count不具有记忆功能const count = useRef(0) // 可以给普通值进行记忆操作const handleClick = () =>{count.current++;console.log(count.current);setNum(num + 1)// console.log(num); // 还是之前的值}return (<div><button onClick={handleClick}>点击</button></div>);}let element = (<Welcome />);root.render(element);

4. 结合useEffect,只在更新时触发

 // 4. 结合useEffect,只在更新时触发let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef } = React;let Welcome = (props) => {// 响应式数据,具有记忆功能,点击后响应式数据加1const [num, setNum] = useState(0);const isUpdate = useRef(false) useEffect(()=>{// 只在点击时候触发if (isUpdate.current) {console.log(num);}})const handleClick = () =>{setNum(num + 1)isUpdate.current = true// console.log(num); // 还是之前的值}return (<div><button onClick={handleClick}>点击</button></div>);}let element = (<Welcome />);root.render(element);

FAQ

https://zh-hans.legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function

相关文章：

3.react useRef使用与常见问题

react useRef使用与常见问题 文章目录 react useRef使用与常见问题1. Dom操作: useRef()2. 函数组件的转发: React.forwardRef()3. 对普通值进行记忆, 类似于一个class的实例属性4. 结合useEffect,只在更新时触发FAQ 1. Dom操作: useRef() // 1. Dom操作: useRef()let app doc…...

编程日记 2023/8/19 8:35:27

Axios使用CancelToken取消重复请求

处理重复请求&#xff1a;没有响应完成的请求&#xff0c;再去请求一个相同的请求&#xff0c;会把之前的请求取消掉 新增一个cancelRequest.js文件 import axios from "axios" const cancelTokens {}export const addPending (config) > {const requestKey …...

编程日记 2023/8/19 8:34:26

九耶丨阁瑞钛伦特-Spring boot与Spring cloud 之间的关系

Spring Boot和Spring Cloud是两个相互关联的项目&#xff0c;它们可以一起使用来构建微服务架构。 Spring Boot是一个用于简化Spring应用程序开发的框架&#xff0c;它提供了自动配置、快速开发的特性&#xff0c;使得开发人员可以更加轻松地创建独立的、生产级别的Spring应用程…...

编程日记 2023/8/19 8:33:24

总结，由于顺丰的问题，产生了电脑近期一个月死机问题集锦

由于我搬家&#xff0c;我妈搞顺丰发回家&#xff0c;但是没有检查有没有坏&#xff0c;并且我自己由于不可抗力因素&#xff0c;超过了索赔时间&#xff0c;反馈给顺丰客服&#xff0c;说超过了造成了无法索赔的情况&#xff0c;现在总结发生了损坏配件有几件&#xff0c;显卡…...

编程日记 2023/8/19 8:32:23

C#程序配置读写例子 - 开源研究系列文章

今天讲讲关于C#的配置文件读写的例子。 对于应用程序的配置文件&#xff0c;以前都是用的ini文件进行读写的&#xff0c;这个与现在的json类似&#xff0c;都是键值对应的&#xff0c;这次介绍的是基于XML的序列化和反序列化的读写例子。对于ini文件&#xff0c;操作系统已经提…...

编程日记 2023/8/19 8:31:23

Angular中的管道Pipes

Angular中的管道&#xff08;Pipes&#xff09;是一种强大的工具&#xff0c;它可以处理和转换数据&#xff0c;然后将其呈现在视图中。它们可以被用于排序、格式化和过滤数据等任务。在本文中&#xff0c;我们将介绍Angular中的管道以及如何使用它们来简化开发过程。 管道的基…...

编程日记 2023/8/19 8:30:22

React入门 jsx学习笔记

一、JSX介绍 概念&#xff1a;JSX是 JavaScript XML&#xff08;HTML&#xff09;的缩写&#xff0c;表示在 JS 代码中书写 HTML 结构 作用&#xff1a;在React中创建HTML结构&#xff08;页面UI结构&#xff09; 优势&#xff1a; 采用类似于HTML的语法&#xff0c;降低学…...

编程日记 2023/8/19 8:29:21

sqlserver数据库中把一张表中的数据复制到另一张表中

我们在使用ERP时经常会遇到&#xff0c;把老系统的单据直接拉过来使用&#xff0c;但是对应的数据却没有&#xff0c;为空&#xff0c;这时候就需要把老系统数据库里的数据复制一份到新系统里&#xff0c;&#xff08;方法如下&#xff09; 1、如果是整个表复制表达如下&#…...

编程日记 2023/8/19 8:28:19

el-table 多个表格切换多选框显示bug

今天写了个功能&#xff0c;点击左侧的树做判断&#xff0c;一级树节点显示系统页面&#xff0c;二级树节点显示数据库页面&#xff0c;三级树节点显示表页面。 数据库页面和表页面分别有2个el-table ,上面的没有多选框&#xff0c;下面的有多选框 现在出现bug&#xff0c;在…...

编程日记 2023/8/19 8:27:18

UE5.2程序发布及运行问题记录

发布后的程序默认是以全屏模式启动运行的&#xff0c;通过添加以下命令行参数&#xff0c;可实现程序的窗口模式运行&#xff1a; -ResX1280 -ResY720 -WINDOWED 发布后的程序&#xff0c;启动时&#xff0c;提示显卡驱动警告&#xff08;如图1所示&#xff09;&#xff0c;但是…...

编程日记 2023/8/19 8:26:17

c语言strtol函数、strtod函数、strtoul函数浅悉

---------------- | strtol | ---------------- i.e. string to long long int strtol(const char *nptr, char **endptr, int base) strtol()会将nptr指向的字符串&#xff0c;根据参数base&#xff0c;按权转化为long int, 然后返回这个值。 参数base的范…...

编程日记 2023/8/19 8:25:15

Spark第三课

1.分区规则 1.分区规则 shuffle 1.打乱顺序 2.重新组合 1.分区的规则 默认与MapReduce的规则一致,都是按照哈希值取余进行分配. 一个分区可以多个组,一个组的数据必须一个分区 2. 分组的分区导致数据倾斜怎么解决? 扩容 让分区变多修改分区规则 3.HashMap扩容为什么必须…...

编程日记 2023/8/19 8:24:14

LangChain手记 Chains

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Chains&#xff08;源代码可见&#xff09; Chains 直译链&#xff0c;表达的意思更像是对话链&#xff0c;对话链的背后是思维链 LLM Chain&#xff08;LLM链&#xff09; 首先介绍了一个最简单的例子&#xff0c…...

编程日记 2023/8/19 8:23:13

ONNX版本YOLOV5-DeepSort (rknn版本已经Ready)

目录 1. 前言 2. 储备知识 3. 准备工作 4. 代码修改的地方 5.结果展示 1. 前言 之前一直在忙着写文档&#xff0c;之前一直做分类&#xff0c;检测和分割&#xff0c;现在看到跟踪算法&#xff0c;花了几天时间找代码调试&#xff0c;看了看&#xff0c;展示效果比单纯的检…...

编程日记 2023/8/19 8:22:12

MySQL的约束

文章目录 1、约束的概念2、约束的分类2.1 主键约束2.1.1 概念2.1.2 主键操作 2.2 自增约束2.2.1 概念2.2.2 自增操作 2.3 唯一约束2.3.1 概念2.3.2 唯一操作 2.4 非空约束2.4.1 概念2.4.2 非空操作 2.5 默认约束2.5.1 概念2.5.2 默认操作 2.6 外键约束2.6.1 概念2.6.2 外键操作…...

编程日记 2023/8/19 8:21:11

Lnton羚通关于【PyTorch】教程：torchvision 目标检测微调

torchvision 目标检测微调 本教程将使用Penn-Fudan Database for Pedestrian Detection and Segmentation 微调 预训练的Mask R-CNN 模型。 它包含 170 张图片&#xff0c;345 个行人实例。 定义数据集 用于训练目标检测、实例分割和人物关键点检测的参考脚本允许轻松支持添加…...

编程日记 2023/8/19 8:20:10

AMD fTPM RNG的BUG使得Linus Torvalds不满

导读因为在 Ryzen 系统上对内核造成了困扰&#xff0c;Linus Torvalds 最近在邮件列表中表达了对 AMD fTPM 硬件随机数生成器的不满&#xff0c;并提出了禁用该功能的建议。 因为在 Ryzen 系统上对内核造成了困扰&#xff0c;Linus Torvalds 最近在邮件列表中表达了对 AMD fTPM…...

编程日记 2023/8/19 8:19:09

idea 转换为 Maven Project 的方法

选项&#xff1a; Add as Maven Project...

编程日记 2023/8/19 8:18:08

es1.7.2 按照_type先聚合，再按照时间二次聚合

// 设置查询条件if (this.query ! null) {this.searchbuilder.setQuery(this.query);}TermsBuilder typeAggregation AggregationBuilders.terms("agg_type").field("_type");DateHistogramBuilder dateTermsBuilder AggregationBuilders.dateHistogram(…...

编程日记 2023/8/19 8:17:06

pyqt5 如何修改QplainTextEdit 背景色和主窗口的一样颜色

如果您希望将 QPlainTextEdit 的背景颜色设置为与窗口背景相似的灰色&#xff0c;您可以使用窗口的背景颜色作为基准来设置 QPlainTextEdit 的背景颜色。以下是一个示例代码&#xff0c;展示如何实现这一点&#xff1a; from PyQt5.QtWidgets import QApplication, QMainWindo…...

编程日记 2023/8/19 8:16:04

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/3 19:46:20

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/2 12:38:28

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59