useRef() 而不是仅仅声明一个变量有什么好处？答案

【问题标题】：What are the advantages of useRef() instead of just declaring a variable?useRef() 而不是仅仅声明一个变量有什么好处？
【发布时间】：2020-06-18 15:05:30
【问题描述】：

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

Docs:

您可能熟悉 refs 主要是作为访问 DOM 的一种方式。如果你通过 ref 将 ref 对象传递给 React，React 会在相应 DOM 节点发生变化时将其 .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 直到链的末尾。

【问题讨论】：

您的意思是在组件外部使用带有let 的变量吗？如有必要，请举例说明。
@stackoverflow-newbie：我添加了一个我要问的最小示例，但我认为 Jayce444 有我需要的答案。

标签： reactjs react-hooks

【解决方案1】：

我正在更改我的答案并将人们推荐给下面的 Arman，因为它更贴切。本质上，对于函数式组件，整个函数在每次重新渲染时都会运行。这意味着在函数主体中使用简单的let x = 5; 初始化的变量将在每次渲染时重新初始化，并重置它们。这就是我们需要像 useRef 这样的钩子的原因，它提供了一个 reference 到一个在渲染之间持续存在的值

【讨论】：

您能添加任何信息或链接来解释为什么不能吗？我对这些钩子完全陌生，而且对 React 还不是很熟练，所以我想尽可能多地了解这一点。
功能组件相当于 React.Component 类的渲染函数。因此，排除了所有类实例变量功能后，就无法定义实例变量。 Hooks 为等效用例提供 useRef。
解释不好。简单地说：变量在渲染之间忘记了它们的值。 useRef() 允许您记住值，就像类属性将存储在类中一样。
我直接想到的一个问题是，如果我改为定义函数的outside变量会怎样。但是，如果您在同一个文件中创建多个组件，这将不起作用，因为变量未绑定到组件（而不是 useRef ref）。这是一些不错的示例代码：codesandbox.io/s/…
对于那些说你不能有实例变量的人，如果我只是做了一个普通的变量声明，比如“var someValue”。这在 react 函数组件中似乎是可行的，没问题

【解决方案2】：

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

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

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

【讨论】：

我不确定我是否遵循这一点。该变量将属于组件，而不是渲染函数，那么为什么它会在每次渲染时更新？
useRef 是一个钩子，应该在函数组件中使用，你说的是类组件。每次重新渲染时都会调用 FC。