当你想让一个组件“记住”一些信息，但又不想这些信息触发新的渲染时，你可以使用 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。以下是一些这些罕见的情况：