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。