useRef有什么用?

看一下官网定义

useRef是一个React Hook,它能帮助引用一个不需要渲染的值

这句话透露出一个信息,不需要渲染的值可以用useRef引用,那需要渲染的值用什么引用呢?当然是useState了,需要渲染的值指的就是状态嘛!
看下官网的例子,可以方便你理解:

import React,{useState, useEffect, useRef} from 'react';

const DemoRef = () => {
    const [count, setCount] = useState(0)
    let timer = null;
    useEffect(() => {
        timer = setInterval(()=>{
            //这里注意一下不要直接传递下一个状态setCount(count+1),这样做的话,你会发现一直是0-->1来回闪烁,
            //这是因为set函数不会更新已经运行在代码中的count状态变量,而传递一个更新函数setCount(count=>count+1)
            //则会获取待定状态,并从中计算下一个状态
            setCount(count=>count+1)
        },1000)
    }, [])

    const onClick = () => {
        console.log(timer,'timer')
        clearInterval(timer)
    }

    return (
        <div>
            <p>count:{count}</p>
            <button onClick={onClick}>点击清除</button>
        </div>
    )
}
export default DemoRef;

在这里插入图片描述
结果如图,会发现timer一直是null,这是因为每次setState之后,组件都会重新运行一遍,然后let timer = null;每次都每次都会重新赋值为null。这样很明显,内存泄漏。
这时就可以使用useRef来处理这个了

import React,{useState, useEffect, useRef} from 'react';

const DemoRef = () => {
    const [count, setCount] = useState(0)
    let timer = useRef();
    useEffect(() => {
        timer.current = setInterval(()=>{
            //这里注意一下不要直接传递下一个状态setCount(count+1),这样做的话,你会发现一直是0-->1来回闪烁,
            //这是因为set函数不会更新已经运行在代码中的count状态变量,而传递一个更新函数setCount(count=>count+1)
            //则会获取待定状态,并从中计算下一个状态
            setCount(count=>count+1)
        },1000)
    }, [])

    const onClick = () => {
        console.log(timer,'timer')
        clearInterval(timer.current)
    }

    return (
        <div>
            <p>count:{count}</p>
            <button onClick={onClick}>点击清除</button>
        </div>
    )
}
export default DemoRef;

在这里插入图片描述
通过这个例子就能看出useRef的一个功能,那就是引用一个值,使其跳过组件的重新渲染过程。
useRef还有一个功能,那就是操作Dom。看下面这个例子

import React,{useRef} from 'react';

const RefDom = () => {
    const inputRef = useRef();
    

    const onClick = () => {
        console.log(inputRef.current)
        inputRef.current.value = 'lili'
    }

    return (
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick={onClick}>点击自动填充</button>
        </div>
    )
}
export default RefDom;

在这里插入图片描述
可以看到,点击按钮之后,会给input填充lili

使用 ref 可以确保:

  • 可以在重新渲染之间 存储信息(普通对象存储的值每次渲染都会重置)。
  • 改变它 不会触发重新渲染(状态变量会触发重新渲染)。
  • 对于组件的每个副本而言,这些信息都是本地的(外部变量则是共享的)。

改变 ref 不会触发重新渲染,所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要,使用 state 代替。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/403233.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的玉米病虫害检测系统(Python+PySide6界面+训练代码)

摘要&#xff1a;本文介绍了一种基于深度学习的玉米病虫害检测系统系统的代码&#xff0c;采用最先进的YOLOv8算法并对比YOLOv7、YOLOv6、YOLOv5等算法的结果&#xff0c;能够准确识别图像、视频、实时视频流以及批量文件中的玉米病虫害。文章详细解释了YOLOv8算法的原理&#…

防御保护--防病毒网关AV

目录 病毒 防病毒处理流量 防病毒的配置 防病毒&#xff08;AV&#xff09; --- 传统的AV防病毒的方式是对文件进行查杀。 传统的防病毒的方式是通过将文件缓存之后&#xff0c;再进行特征库的比对&#xff0c;完成检测。但是&#xff0c;因为需 要缓存文件&#xff0c;则将…

Swift Combine 使用调试器调试管道 从入门到精通二十六

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…

【数据结构初阶 6】二叉树:堆的基本操作 + 堆排序的实现

文章目录 &#x1f308; Ⅰ 二叉树的顺序结构&#x1f308; Ⅱ 堆的概念与性质&#x1f308; Ⅲ 堆的基本操作01. 堆的定义02. 初始化堆03. 堆的销毁04. 堆的插入05. 向上调整堆06. 堆的创建07. 获取堆顶数据08. 堆的删除09. 向下调整堆10. 判断堆空 &#x1f308; Ⅳ 堆的基本…

Spring之AOP源码解析(上)

Aop相关注解 EnableTransactionManagementEnableAspectJAutoProxyEnableAsync... 从注解切入来看看这些注解都干了什么 Import注解作用简述 注入的类一般继承ImportSelector或者ImportBeanDefinitionRegistrar接口 继承ImportSelector接口&#xff1a;selectImports方法返回…

2.22学习总结

1.营救 2.租用游艇 3.砍树 4.买礼物 5.刷题统计 砍树https://www.dotcpp.com/oj/problem3157.html 题目描述 给定一棵由 n 个结点组成的树以及 m 个不重复的无序数对 (a1, b1), (a2, b2), . . . , (am, bm)&#xff0c;其中 ai 互不相同&#xff0c;bi 互不相同&#xff0c;ai…

MYSQL-入门

一.安装和连接 1.1 安装 mysql安装教程&#xff1a; 2021MySql-8.0.26安装详细教程&#xff08;保姆级&#xff09;_2021mysql-8.0.26安装详细教程(保姆级)_mysql8.0.26_ylb呀的博客-cs-CSDN博客 workbench安装&#xff1a; MySQL Workbench 安装及使用-CSDN博客 1.2 配…

戏曲文化苑|戏曲文化苑小程序|基于微信小程序的戏曲文化苑系统设计与实现(源码+数据库+文档)

戏曲文化苑小程序目录 目录 基于微信小程序的戏曲文化苑系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 &#xff08;1&#xff09;戏曲管理 &#xff08;2&#xff09;公告信息管理 &#xff08;3&#xff09;公告类型管理…

AI智能分析网关V4智慧工厂视频智能监管与风险预警平台建设方案

一、背景需求分析 1&#xff09;随着信息技术的迅猛发展和制造业竞争的加剧&#xff0c;智慧工厂成为了推动制造业转型升级的重要引擎。智慧工厂解决方案通过整合物联网、人工智能、大数据分析等先进技术&#xff0c;实现生产过程的智能化、自动化和高效化&#xff0c;为企业提…

java-cef jcefmaven java集成CEF

java-cef 项目地址 Bitbucket jcefmaven 项目地址 GitHub - jcefmaven/jcefmaven: Maven artifacts for JCef 两个项目之间的关系 编译java-cef https://www.cnblogs.com/JpgCode/p/9397166.html jcefmaven 使用例子 Java使用JCEF开发 windows桌面应用-腾讯云开发者社区…

python+vue_django编程语言在线学习平台

本论文的主要内容包括&#xff1a; 第一&#xff0c;研究分析当下主流的web技术&#xff0c;结合学校日常管理方式&#xff0c;进行编程语言在线学习平台的数据库设计&#xff0c;设计编程语言在线学习平台功能&#xff0c;并对每个模块进行说明。 第二&#xff0c;陈列说明该系…

Delphi 11 安卓的蓝牙权限申请

上一篇博客里面的代码&#xff0c;演示如何申请安卓的权限。 如何申请安卓的蓝牙权限&#xff1f; 本博客之前有一篇文章写过。 现在 Google 要求 Android API Level 必须是 33。对于 BLE 的权限申请&#xff0c;有了一些新的要求。 以下描述&#xff0c;基于 Delphi 11。 …

C#之WPF学习之路(2)

目录 控件的父类 DispatcherObject类 DependencyObject类 DependencyObject 类的关键成员和方法 Visual类 Visual 类的主要成员和方法 UIElement类 UIElement 类的主要成员和功能 FrameworkElement类 FrameworkElement 类的主要成员和功能 控件的父类 在 WPF (Windo…

服务网格Service Mesh和Istio

文章目录 服务网格&#xff08;Service Mesh&#xff09;市场上三种服务网格解决方案服务网格的特征流量管理安全性可观察性 Istio简介Istio提供了什么功能服务 &#xff1f;Istio 核心特性流量管理安全可观察性 平台支持 服务网格&#xff08;Service Mesh&#xff09; 服务网…

【ECharts】调用接口获取后端数据的四种方法

使用eacharts做大屏&#xff0c;需要使用后端数据&#xff0c;下面的方法是自己试过有效的&#xff0c;有什么不对的&#xff0c;望各位大佬指点。 目录 方法一&#xff1a;在mounted中使用定时器调用eacharts方法&#xff08;定时器可以获取到data中的数据&#xff09; 方法…

《游戏引擎架构》 -- 学习4

资源及文件系统 文件系统 游戏引擎的文件系统API通常提供以下功能&#xff1a; 搜需路径&#xff1a;是含一串路径的字符串&#xff0c;各路径之间以特殊字符&#xff08;如冒号或分号&#xff09;分隔&#xff0c;找文件时就会从这些路径进行搜寻。例如在命令行下执行程序&a…

汽车制造5G智能工厂数字孪生可视化平台,推进汽车行业数字化转型

汽车制造5G智能工厂数字孪生可视化平台&#xff0c;推进汽车行业数字化转型。在当今数字化时代&#xff0c;汽车行业正面临着前所未有的挑战和机遇。随着5G技术的快速发展&#xff0c;汽车制造正在向智能化、数字化转型&#xff0c;而数字孪生技术作为这一转型的核心驱动力&…

阿里开源低代码引擎 - Low-Code Engine

阿里开源低代码引擎 - Low-Code Engine 本文主要介绍如何在Windows运行/开发阿里开源低代码引擎 - Low-Code Engine 详细文档参见【 阿里开源低代码引擎 - Low-Code Engine 官方文档】 目录 阿里开源低代码引擎 - Low-Code Engine一、环境准备1、使用 WSL 在 Windows 上安装 L…

Istio实战:Istio Kiali部署与验证

目录 前言一、Istio安装小插曲 注意事项 二、Kiali安装三、Istio测试参考资料 前言 前几天我就开始捣腾Istio。前几天在执行istioctl install --set profiledemo -y 的时候老是在第二步就报错了&#xff0c;开始我用的istio版本是1.6.8。 后面查看k8s与istio的版本对应关系后发…

QT 数据库的增加操作和画图 Win

第一步、先配置CMakeLists.txt 在CMakeLists.txt中添加 find_package(Qt6 REQUIRED COMPONENTS Sql) find_package(Qt6 REQUIRED COMPONENTS Charts)target_link_libraries(${PROJECT_NAME} PRIVATE Qt6::Sql) target_link_libraries(${PROJECT_NAME} PRIVATE Qt6::Charts)避…