Question

通过查看hooks文档和一些博客，我们了解到，使用useRef（）时，我们存储了一个可变值。

您可能最熟悉引用作为访问DOM的一种方式。如果您将ref对象传递给React，只要该节点发生更改，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

最后一句话清楚地描述了它：

useRef将在每个渲染器上为您提供相同的ref对象。

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

Answer 2

如果您正在谈论类组件，则只需定义附加到类实例的变量即可，例如构造函数中有this.someValue = {};，然后根据需要通过this.someValue对其进行引用。

但是在功能组件中，您没有这些实例变量，因此需要使用useRef，它为您提供了等效的功能。

用useRef（）代替声明变量有什么好处？

2 个答案: