当前位置: 首页 > ds >正文

React之旅-06 Ref

当你想让一个组件“记住”一些信息,但又不想这些信息触发新的渲染时,你可以使用 ref。

使用 Ref 前,需要导入useRef,代码如下:

import { useRef } from 'react';

在您的组件内部,调用 useRef 并将您想要引用的初始值作为唯一参数传递。例如,这里是对值0的引用:

const ref = useRef(0);

您可以通过 ref.current 属性访问该 ref 的当前值。这个值是有意可变的,意味着您可以读取和写入它。它就像您组件中的一个秘密口袋,React不会跟踪。

Ref 指向一个数字,但就像 State 一样,你可以指向任何东西:一个字符串、一个对象,甚至是函数。与 State 不同,Ref 是一个普通的 JavaScript 对象,你可以读取和修改其当前属性。

请注意,组件不会在每次增加时重新渲染。像 State 一样,React 会在重新渲染之间保留 Ref。然而,设置 State 会重新渲染组件。改变 Ref 不会!

Ref 和 State 的区别,见下表:

refs

state
useRef(初始值)useSate(初始值)
当改变时,不会触发渲染当改变时,会触发渲染
“可变”——可以在渲染过程之外,修改或改变“不可变”——您必须使用状态设置函数来修改状态变量以排队重新渲染。
在渲染期间,不应该读取或更新可随时读取

通常,当您的组件需要与外部API进行通信时,您会使用ref——通常是不会影响组件外观的浏览器API。以下是一些这些罕见的情况:

  • 存储超时ID
  • 存储和操作DOM元素
  • 存储其他不必要用于计算JSX的对象

如果你的组件需要存储一些值,但不会影响渲染逻辑,请选择使用 ref。

http://www.xdnf.cn/news/15528.html

相关文章:

  • 波兰无人机具身导航基准测试与最新进展!FlySearch:探索视觉语言模型的探索能力
  • python学智能算法(十八)|SVM基础概念-向量点积
  • 深入了解linux系统—— 进程信号的产生
  • 基于Snoic的音频对口型数字人
  • OPC数采服务器软件Takebishi为何比Kepware实施成本更低?
  • I/O 多路复用实现方式
  • kafka的部署
  • 第十二批深度合成算法备案情况
  • 分布式系统中设计临时节点授权的自动化安全审计
  • Codeforces Round 787 (Div. 3)(A,B,C,D,E,F,G)
  • NSSCTF Web 一点学习
  • 【2025/07/14】GitHub 今日热门项目
  • 015 程序地址空间入门
  • muduo面试准备
  • ThreadLocal深度解析:结构、存储机制与最佳实践
  • Linux ACL权限策略
  • 分享三个python爬虫案例
  • Docker搭建Redis分片集群
  • 【PTA数据结构 | C语言版】字符串连接操作
  • Kotlin集合接口
  • 【数据同化案例1】ETKF求解参数-状态联合估计的同化系统(完整MATLAB实现)
  • 问题记录:Fastjson序列化-空值字段处理
  • 跨域中间件通俗理解
  • 日记-生活随想
  • LVS负载均衡集群概述
  • C++--List的模拟实现
  • 【时时三省】(C语言基础)通过指针引用数组元素2
  • 20250711_Sudo 靶机复盘
  • 【读书笔记】《Effective Modern C++》第4章 Smart Pointers
  • 串口学习和蓝牙通信HC05(第八天)