useRef() 而不是仅仅声明一个变量有什么优点？

Question

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

文档：

您可能熟悉 refs 主要是作为访问 DOM 的一种方式。如果您将 ref 对象传递给 React with ，React 会在该节点发生更改时将其 .current 属性设置为相应的 DOM 节点。

但是， useRef() 不仅对 ref 属性有用。保持任何可变值类似于在类中使用实例字段的方式，这很方便。

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

与仅声明和使用变量相比，这给我们带来了哪些优势let？

代码示例：

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

跟进：给出的答案很有帮助，结合一些测试让我得到了我需要的理解。如果有人遇到这个概念有问题，我现在理解的方式是：

• 您可以拥有实例变量，但它们确实是即时的，并且每次重新渲染都会重新初始化它们。
• useRef() 给你一些更持久的东西，比如 useState() 但更新不会触发重新渲染，如果你以链接方式进行大量操作，非常有用，但不想触发重新渲染，直到结束
• useState() 应该只与 UI 元素使用的变量相关联，因为对状态的任何更改都会触发整个组件的重新渲染。在整个过程中不要有一连串操作状态的动作，使用 refs 直到链条的末端。

Answer 1

我正在更改我的答案，并将人们推荐给下面阿曼的答案，因为它是更合适的答案。本质上，对于功能组件来说，整个函数在每次重新渲染时都会运行。let x = 5;这意味着在函数体内用简单函数初始化的变量将在每次渲染时重新初始化，从而重置它们。这就是我们需要像这样的钩子的原因useRef，它提供了对渲染之间持续存在的值的引用

Answer 2

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

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

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