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 = 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…...
Axios使用CancelToken取消重复请求
处理重复请求：没有响应完成的请求，再去请求一个相同的请求，会把之前的请求取消掉 新增一个cancelRequest.js文件 import axios from "axios" const cancelTokens {}export const addPending (config) > {const requestKey …...
九耶丨阁瑞钛伦特-Spring boot与Spring cloud 之间的关系
Spring Boot和Spring Cloud是两个相互关联的项目，它们可以一起使用来构建微服务架构。 Spring Boot是一个用于简化Spring应用程序开发的框架，它提供了自动配置、快速开发的特性，使得开发人员可以更加轻松地创建独立的、生产级别的Spring应用程…...
总结，由于顺丰的问题，产生了电脑近期一个月死机问题集锦
由于我搬家，我妈搞顺丰发回家，但是没有检查有没有坏，并且我自己由于不可抗力因素，超过了索赔时间，反馈给顺丰客服，说超过了造成了无法索赔的情况，现在总结发生了损坏配件有几件，显卡…...
C#程序配置读写例子 - 开源研究系列文章
今天讲讲关于C#的配置文件读写的例子。 对于应用程序的配置文件，以前都是用的ini文件进行读写的，这个与现在的json类似，都是键值对应的，这次介绍的是基于XML的序列化和反序列化的读写例子。对于ini文件，操作系统已经提…...
Angular中的管道Pipes
Angular中的管道（Pipes）是一种强大的工具，它可以处理和转换数据，然后将其呈现在视图中。它们可以被用于排序、格式化和过滤数据等任务。在本文中，我们将介绍Angular中的管道以及如何使用它们来简化开发过程。 管道的基…...
React入门 jsx学习笔记
一、JSX介绍 概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构 作用：在React中创建HTML结构（页面UI结构） 优势： 采用类似于HTML的语法，降低学…...
sqlserver数据库中把一张表中的数据复制到另一张表中
我们在使用ERP时经常会遇到，把老系统的单据直接拉过来使用，但是对应的数据却没有，为空，这时候就需要把老系统数据库里的数据复制一份到新系统里，（方法如下） 1、如果是整个表复制表达如下&#…...
el-table 多个表格切换多选框显示bug
今天写了个功能，点击左侧的树做判断，一级树节点显示系统页面，二级树节点显示数据库页面，三级树节点显示表页面。 数据库页面和表页面分别有2个el-table ,上面的没有多选框，下面的有多选框 现在出现bug，在…...
UE5.2程序发布及运行问题记录
发布后的程序默认是以全屏模式启动运行的，通过添加以下命令行参数，可实现程序的窗口模式运行： -ResX1280 -ResY720 -WINDOWED 发布后的程序，启动时，提示显卡驱动警告（如图1所示），但是…...
c语言strtol函数、strtod函数、strtoul函数浅悉
---------------- | strtol | ---------------- i.e. string to long long int strtol(const char *nptr, char **endptr, int base) strtol()会将nptr指向的字符串，根据参数base，按权转化为long int, 然后返回这个值。 参数base的范…...
Spark第三课
1.分区规则 1.分区规则 shuffle 1.打乱顺序 2.重新组合 1.分区的规则 默认与MapReduce的规则一致,都是按照哈希值取余进行分配. 一个分区可以多个组,一个组的数据必须一个分区 2. 分组的分区导致数据倾斜怎么解决? 扩容 让分区变多修改分区规则 3.HashMap扩容为什么必须…...
LangChain手记 Chains
整理并翻译自DeepLearning.AILangChain的官方课程：Chains（源代码可见） Chains 直译链，表达的意思更像是对话链，对话链的背后是思维链 LLM Chain（LLM链） 首先介绍了一个最简单的例子，…...
ONNX版本YOLOV5-DeepSort (rknn版本已经Ready)
目录 1. 前言 2. 储备知识 3. 准备工作 4. 代码修改的地方 5.结果展示 1. 前言 之前一直在忙着写文档，之前一直做分类，检测和分割，现在看到跟踪算法，花了几天时间找代码调试，看了看，展示效果比单纯的检…...
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 外键操作…...
Lnton羚通关于【PyTorch】教程：torchvision 目标检测微调
torchvision 目标检测微调 本教程将使用Penn-Fudan Database for Pedestrian Detection and Segmentation 微调 预训练的Mask R-CNN 模型。 它包含 170 张图片，345 个行人实例。 定义数据集 用于训练目标检测、实例分割和人物关键点检测的参考脚本允许轻松支持添加…...
AMD fTPM RNG的BUG使得Linus Torvalds不满
导读因为在 Ryzen 系统上对内核造成了困扰，Linus Torvalds 最近在邮件列表中表达了对 AMD fTPM 硬件随机数生成器的不满，并提出了禁用该功能的建议。 因为在 Ryzen 系统上对内核造成了困扰，Linus Torvalds 最近在邮件列表中表达了对 AMD fTPM…...
idea 转换为 Maven Project 的方法
选项： Add as Maven Project...
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(…...
pyqt5 如何修改QplainTextEdit 背景色和主窗口的一样颜色
如果您希望将 QPlainTextEdit 的背景颜色设置为与窗口背景相似的灰色，您可以使用窗口的背景颜色作为基准来设置 QPlainTextEdit 的背景颜色。以下是一个示例代码，展示如何实现这一点： from PyQt5.QtWidgets import QApplication, QMainWindo…...
基于Feather M0与VS1053打造可穿戴MP3播放器：从硬件到软件的完整DIY指南
1. 项目概述：打造你的专属可穿戴音乐伴侣几年前，我在一个创客市集上看到一个朋友把MP3播放器做成了复古磁带的样子，当时就觉得特别酷。那种把数字音乐和实体交互结合起来的乐趣，是手机播放器给不了的。后来接触到Adafruit的Feathe…...
如何快速掌握哔哩下载姬：B站视频下载的终极免费解决方案
如何快速掌握哔哩下载姬：B站视频下载的终极免费解决方案 【免费下载链接】downkyi 哔哩下载姬downkyi，哔哩哔哩网站视频下载工具，支持批量下载，支持8K、HDR、杜比视界，提供工具箱（音视频提取、去水印等&…...
语义分割模型库选型指南：除了segmentation_models_pytorch，还有哪些宝藏库？附113个编码器实战对比
语义分割模型库深度选型指南：从SMP到工业级解决方案全景解析 当面对一个全新的语义分割项目时，工程师们往往会在众多开源模型库前陷入选择困难。本文将带您深入剖析主流语义分割工具库的技术特性、适用场景与实战表现，帮助您做出精准的技术决…...
TortoiseGit重置与还原功能详解：除了‘后悔药’，还能当‘时光机’和‘后悔药解药’？
TortoiseGit重置与还原功能深度解析：从版本控制到历史重构的艺术 在代码开发的漫长旅途中，每个开发者都曾有过"如果当时..."的瞬间。与大多数版本控制系统不同，Git提供的不仅是一个简单的"撤销"按钮，而是一套…...
深入解析Enso：构建高性能可编程代理与API网关的Go框架
1. 项目概述：一个被低估的“瑞士军刀”如果你在开源社区里混迹过一段时间，大概率见过这样的场景：一个项目仓库，名字起得挺酷，比如“Enso”，简介里写着“一个现代化的代理工具”，但点进去一看&am…...
中小企业如何通过Taotoken的Token Plan套餐控制AI集成成本
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 中小企业如何通过Taotoken的Token Plan套餐控制AI集成成本 应用场景类，中小企业在为官网或CRM系统集成AI功能时&#x…...
基于ESP32与电子墨水屏的低功耗物联网信息终端开发实战
1. 项目概述：打造你的专属韦伯望远镜状态看板 如果你和我一样，对浩瀚宇宙充满好奇，同时又是个喜欢动手鼓捣硬件的极客，那么这个项目绝对能让你兴奋起来。想象一下，在你的书桌或工作台上，有一个巴掌大的设备…...
逆向工程ChatGPT：开源社区如何解构大语言模型黑盒
1. 项目概述：当开源精神“撞上”闭源巨兽最近在GitHub上闲逛，发现一个叫Zai-Kun/reverse-engineered-chatgpt的项目热度不低。光看名字就挺有意思的，“逆向工程ChatGPT”。这可不是什么破解软件或者绕过付费墙的小把戏，它背后代表…...
你的边缘AI盒子为什么烫手？——散热设计的最后一道物理防线
🎓作者简介：科技自媒体优质创作者 🌐个人主页：莱歌数字-CSDN博客 211、985硕士，从业16年 从事结构设计、热设计、售前、产品设计、项目管理等工作，涉足消费电子、新能源、医疗设备、制药信息化、核工业等…...
FanControl终极指南：免费开源的风扇控制神器，轻松解决Windows散热与噪音问题
FanControl终极指南：免费开源的风扇控制神器，轻松解决Windows散热与噪音问题 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https:…...