react 学习 —— 15、使用 ref 引用值

什么时候使用 ref?

当你希望组件"记住"某些信息,但又不想让这些信息 触发新的渲染 时,你可以使用 ref 。以下是使用的几个场景:

  • 存储 timeout ID
  • 存储和操作 DOM 元素
  • 存储不需要被用来计算 JSX 的其他对象

怎么使用 ref?

1、引入 ref。

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

2、在你的组件内,调用 useRef Hook 并传入你想要引用的初始值作为唯一参数。

javascript 复制代码
const ref = useRef(0);

3、useRef 返回一个这样的对象:

javascript 复制代码
{ 
  current: 0 // 你向 useRef 传入的值
}

4、你可以用 ref.current 属性访问该 ref 的当前值。这个值是有意被设置为可变的,意味着你既可以读取它也可以写入它。

javascript 复制代码
ref.current = 3;

useRef 内部是如何运行的?

原则上 useRef 可以在 useState 的基础上 实现。 你可以想象在 React 内部,useRef 是这样实现的:

javascript 复制代码
// React 内部
function useRef(initialValue) {
  const [ref, unused] = useState({ current: initialValue });
  return ref;
}

第一次渲染期间,useRef 返回 { current: initialValue }。 该对象由 React 存储,因此在下一次渲染期间将返回相同的对象。 请注意,在这个示例中,state 设置函数没有被用到。它是不必要的,因为 useRef 总是需要返回相同的对象!

ref 和 state 的不同之处

ref state
useRef (initialValue) 返回 { current: initialValue } useRef(initialValue) 返回 { current: initialValue }
更改时不会触发重新渲染 更改时触发重新渲染
可变 ------ 你可以在渲染过程之外修改和更新 current 的值。 "不可变" ------ 你必须使用 setState 设置函数来修改 state 变量,从而排队重新渲染。
在渲染期间读取(或写入) current 值页面不会改变。 你可以随时读取 state。但是,每次渲染都有自己不变的 state 快照。
相关推荐
DoraBigHead10 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
Jerry_Rod14 小时前
react+umijs 项目快速学习
前端·react.js
AliPaPa15 小时前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
Takklin19 小时前
Vue 与 React 应用初始化机制对比 - 前端框架思考笔记
前端·react.js
Sherry00720 小时前
【译】React 新手踩坑指南:9 个让你秃头的常见错误 🚨
javascript·react.js·前端框架
今天头发还在吗1 天前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗1 天前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥1 天前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial1 天前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
冷冷的菜哥1 天前
react多文件分片上传——支持拖拽与进度展示
前端·react.js·typescript·多文件上传·分片上传