sub:useRef

November 15, 2022

Content #

在类组件中，可以定义类的成员变量，以便能在对象上通过成员属性去保存一些数据。但是在函数组件中，是没有这样一个空间去保存数据的。因此， React 让 useRef 这样一个 Hook 来提供这样的功能。

useRef 的 API 签名如下：

const myRefContainer = useRef(initialValue);

可以把 useRef 看作是在函数组件之外创建的一个容器空间。在这个容器上，可以通过唯一的 current 属设置一个值，从而在函数组件的多次渲染之间共享这个值。

同时你也可以看到，使用 useRef 保存的数据一般是和 UI 的渲染无关的，因此当 ref 的值发生变化时，是不会触发组件的重新渲染的，这也是 useRef 区别于 useState 的地方。