React之旅-06 Ref

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

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

TypeScript 复制代码
import { useRef } from 'react';

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

TypeScript 复制代码
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。

相关推荐
Zacks_xdc14 分钟前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|22 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之1 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro3 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹3 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年3 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵3 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss