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

3.react useRef使用与常见问题

news 2025/7/5 11:02:46

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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/7/4 20:05:03

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/6/17 2:24:14

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/4 19:57:17

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/7/4 23:39:05

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/7/4 14:58:44

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/7/4 12:36:15

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/6/21 10:27:51

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/6/26 4:10:00

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/6/20 16:41:45

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/7/3 9:40:34