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…...
Java中的5大AI框架！
前言在AI技术爆发的这两年里，我一直在思考一个问题：Python有LangChain，JavaScript有LangChain.js，我们Java开发者拿什么来构建AI应用？这个问题在2024-2025年终于有了答案。随着Spring AI的1.0 GA发布、LangChain4j的持…...
2026年中国企业AI应用场景报告
当多模态技术突破模态壁垒，当超级智能体成为业务重构的核心执行者，AI 正从实验室走向产业深水区，成为企业降本增效、创新增长的关键引擎。但与此同时，“AI 应用停留在工具层面”“落地效果不及预期”“行业场景适配难” 等痛点&am…...
微电网调度（风、光、储能、电网交互）附MatlabPython代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室🍊个人信条：格物致知,完整Matlab代码及仿真咨询…...
HPKM-PINN：KAN-MLP并行混合物理信息神经网络技术 第1章 KAN基础与MLP局限的理论分析（二）
脚本 2.1.2.2：激活函数选择——Tanh 与 SwiGLU 在物理约束中的适应性 涉及内容：对比分析 Tanh 与 SwiGLU 激活函数在物理信息神经网络中的适应性，验证不同物理约束（如边界条件、守恒律）下的数值稳定性。 使用方式：运行脚本生成激活函数特性对比、物理约束满足度分析及梯…...
Android Studio 高版本兼容低版本项目配置
AndroidStudio开发工具高版本兼容低版本项目配置：1、 JDK 配置：gradle.properties 文件中指定jdk 版本：org.gradle.java.homeD\:\\ProgramFiles\\JDK\\jdk-11.0.262 配置Gradle 编译版本：3. 显示所有Gradle task 列表设置完成后&a…...
Wan2.2-I2V-A14B实战案例：为本地餐饮店生成15秒抖音爆款菜品视频
Wan2.2-I2V-A14B实战案例：为本地餐饮店生成15秒抖音爆款菜品视频 1. 项目背景与价值 对于本地餐饮商家来说，短视频营销已经成为吸引顾客的重要手段。然而，专业视频制作成本高、周期长，很多小店难以承担。Wan2.2-I2V-A14B文生视频…...
ai辅助硬件设计：让快马智能解析并生成db9接口与mcu连接的完整原理图与代码
在硬件开发中，DB9接口的设计与连接是个常见但容易出错的环节。最近我在一个嵌入式项目里需要实现STM32与DB9接口的RS-232通信，发现传统设计流程存在几个痛点： 引脚定义容易混淆 DB9公头和母头的引脚定义是相反的，比如母头的2号引脚…...
3大焕新方案：老旧iOS设备性能重生全指南
3大焕新方案：老旧iOS设备性能重生全指南 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit 老旧iOS设备随着系统…...
好写作AI：利用多轮人机交互迭代实现深度降AIGC的方法论
改一遍不够？那就改三遍——但每遍都要改对地方很多同学用AI辅助写论文，流程是这样的：用AI生成一段文字 → 觉得“AI味儿”有点重 → 手动改几个词 → 提交。然后被检测系统打回来。于是困惑：我都改了，怎么还是不行&…...
网络安全零基础入门：借助快马AI生成你的第一个防注入登录页面
作为一名刚接触网络安全的小白，我最近尝试用InsCode(快马)平台做了一个防注入的登录页面。整个过程比想象中简单很多，特别适合零基础入门。这里分享我的实践心得，希望能帮到同样想学习网络安全的朋友。 为什么选择登录页面作为切入点 登录功…...