useRef 挂钩中的“当前”键是什么？

Question

阅读 React 文档，有一个非常有用的钩子可以在组件可能刷新之前保存变量的状态或引用。

我完全理解这个钩子，除了一个问题，这就是为什么它必须有一个“current”值而不是我想要保存的变量？

我的期待：

    const myVar = useRef('Hello world!');
    return <h1>{myVar}</h1>

实际上是什么：

    const myVar = useRef('Hello world!');
    return <h1>{myVar.current}</h1>

Answer 1

在 React 中，状态的变化会强制组件重新渲染。 ref 是您想要存储的内容，即使发生变化也不会强制重新渲染。通常是 DOM 节点。

要完成这项工作需要一些间接的手段。 ref 本身始终是同一个对象。然而，参考的属性 - 即

current

属性 - 可能会改变。

Answer 2

在您的示例中，您只读取引用，这可能看起来没有必要，但如果您认为您还想为引用设置一个值，那么它就变得重要且可以理解。

如果react-people在没有

useRef

的情况下实现了

.current

，那么如果你永远不需要设置该值（在运行时），它实际上会起作用。但那样你就根本不需要裁判了。例如。那么你的例子完全可以写成：

const myVar = 'Hello world!';
return <h1>{myVar}</h1>

但是你总是需要为引用设置一些值，如果没有

.current

，这是不可能的。

这里我展示了一些例子来说明如果反应人在没有

.current

的情况下会发生什么：

示例 1：设置 myVar.current

例如考虑这个工作示例：

// in the first run of the component:
const myVar = useRef('old value'); // myVar === useRef_returnValue === { current: 'old value' }
myVar.current = 'new value';       // myVar === useRef_returnValue === { current: 'new value' }

// in the next run of the component:
// myVar is a reference to the same,
// now changed useRef_returnValue === { current: 'new value' }
const myVar = useRef('old value'); 

// (Note that 'old value' in useRef('old value') is only the initial value,
// which doesn't matter anymore after the first run.)

如果没有

.current

，那将无法工作：

// in the first run of the component:
let myVar = useRef('old value');  // myVar === useRef_returnValue === 'old value'
myVar = 'new value';              // myVar is a completely new string 'new value', no reference to the useRef_returnValue anymore.

// in the next run of the component:
// myVar is a reference to the same,
// unchanged useRef_returnValue, still with value 'old value'.
let myVar = useRef('old value');

示例 2：

ref

-属性

即使在您可能认为自己永远不想设置值的情况下，例如：

const inputRef = useRef();
return <input ref={ inputRef } />;  // input.ref becomes the internal useRef-object

输入组件需要一些可以将自身附加到的东西。例如。 虚构的实现可能看起来像这样：

const input = function( props ){
  const thisDomObject = thisDomObject();
  if( props.ref ){
    // input.ref.current becomes thisDomObject,
    // input.ref is the internal useRef-object, so
    // (useRef-object).current also becomes thisDomObject
    props.ref.current = thisDomObject;
  }
};

如果没有

.current

，这将无法工作：

// input.ref was the internal useRef-object, and now becomes thisDomObject.
// The internal useRef-object stays unchanged.
props.ref = thisDomObject;

备注：

我认为属性名称“current”只是一个或多或少任意选择的名称，并不重要。唯一重要的是，它是一个属性。

Answer 3

根据您的代码，useRef 返回以下对象：

{ 当前：“世界你好！” }

因此，您可以使用 myVar.current 属性访问感兴趣的值。

在 React.dev 上阅读有关使用 Refs 引用值的更多信息