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

最新推荐文章于 2025-06-02 15:56:16 发布

原创最新推荐文章于 2025-06-02 15:56:16 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

9 篇文章

订阅专栏

本文详细讲解了在React中如何使用useRef来存储组件信息但避免渲染，以及其与useState的内部机制和区别。

什么时候使用 ref？

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

1、引入 ref。

import { useRef } from 'react';

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

const ref = useRef(0);

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

{ 
  current: 0 // 你向 useRef 传入的值
}

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

ref.current = 3;

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

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

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

ref	state
`useRef (initialValue)` 返回 `{ current: initialValue }`	`useRef(initialValue)` 返回 `{ current: initialValue }`
更改时不会触发重新渲染	更改时触发重新渲染
可变 —— 你可以在渲染过程之外修改和更新 `current` 的值。	“不可变” —— 你必须使用 `setState` 设置函数来修改 `state` 变量，从而排队重新渲染。
在渲染期间读取（或写入） current 值页面不会改变。	你可以随时读取 `state`。但是，每次渲染都有自己不变的 `state` 快照。