useRef() 与仅声明变量相比有哪些优点？

查看 hooks 文档和一些博客，我们了解到，当使用 useRef() 时，我们存储了一个可变值。

Docs https://reactjs.org/docs/hooks-reference.html#useref:

您可能熟悉 ref 主要作为访问 DOM 的一种方式。如果你使用 ref 对象传递给 React，每当该节点发生变化时，React 就会将其 .current 属性设置为相应的 DOM 节点。

然而，useRef() 的用途不仅仅是 ref 属性。它可以方便地保留任何可变值，类似于在类中使用实例字段的方式。

这是可行的，因为 useRef() 创建了一个普通的 JavaScript 对象。 useRef() 和自己创建 {current: ...} 对象之间的唯一区别是 useRef 会在每次渲染时为您提供相同的 ref 对象。

与仅声明和使用变量相比，这给我们带来了什么优势let?

Code ex:

import React, {useRef} from "react";
const MyFunctionalComponent = (props) => {
    const refVariable = useRef('value');
    //versus
    let letVariable = 'value';
}

跟进： 给出的答案很有帮助，并结合一些测试给了我所需的理解。如果有人遇到这个概念有困难，我现在的理解是：

• 您可以拥有实例变量，但它们确实是即时的，并且每次重新渲染都会重新初始化它们。
• useRef() 为您提供了更持久的东西，例如 useState() 但更新不会触发重新渲染，如果您以链接方式进行大量操作，但不想触发重新渲染，则非常有用结束
• useState() 应该只与 UI 元素使用的变量绑定，因为任何状态更改都会触发整个组件的重新渲染。不要有一系列操作过程中的状态，使用 refs 直到链的末尾。

最后一句话描述的很清楚：

useRef 将在每次渲染时为您提供相同的 ref 对象。

如果您自己声明一个简单的 JavaScript 变量，它将在每次渲染时更新。当您需要在重新渲染期间保留某些值时，请使用 Refs（除了使用 ref 属性进行 DOM 节点引用之外）