[英]What is it for the "current" key in useRef hook?
Reading the React documentation, there is a very useful hook to save the state or reference of a variable before the possible refresh of the component.阅读 React 文档,有一个非常有用的钩子可以在可能刷新组件之前保存 state 或变量引用。
I understand perfectly this hook except for one question, and that is why it has to have a " current " value instead of being the variable that I want to save?除了一个问题,我完全理解这个钩子,这就是为什么它必须有一个“当前”值而不是我要保存的变量?
What I am expecting:我所期待的:
const myVar = useRef('Hello world!');
return <h1>{myVar}</h1>
What actually is:实际上是什么:
const myVar = useRef('Hello world!');
return <h1>{myVar.current}</h1>
In React, changes in state force a component to re-render.在 React 中,state 中的更改会强制组件重新渲染。 A ref is for something you want to store that won't force a re-render even if does change.
ref 用于您想要存储的内容,即使发生更改也不会强制重新渲染。 Typically, a DOM node.
通常是一个 DOM 节点。
Making this work requires a bit of indirection.完成这项工作需要一些间接性。 The ref itself is always the same object.
ref 本身始终是相同的 object。 However the ref's properties - ie the
current
attribute - may change.然而 ref 的属性 - 即
current
属性 - 可能会改变。
It might look like unnecessary in your example, where you only read the ref, but it becomes important and understandable, if you consider that you also want to set a value to the ref.在您的示例中,它可能看起来没有必要,您只阅读ref,但如果您认为您还想为 ref设置一个值,它就会变得重要且易于理解。
If the react-people would have implemented useRef
without the .current
, it actually would work if you never have to set the value (in runtime).如果 react-people 会在没有
.current
的情况下实现useRef
,那么如果您不必设置值(在运行时),它实际上会起作用。 But then you wouldn't need a ref at all.但是,您根本不需要参考。 Eg then your example could perfectly fine be written as just:
例如,那么您的示例可以完美地写成:
const myVar = 'Hello world!';
return <h1>{myVar}</h1>
But you always need to set some value to the ref, and that would just be not possible without the .current
.但是你总是需要为 ref 设置一些值,如果没有
.current
,这是不可能的。
Here I show some examples to illustrate what would have happened, if the react-people would have done it without .current
:在这里,我展示了一些示例来说明如果反应人员在没有
.current
的情况下会发生什么:
eg consider this working example:例如考虑这个工作示例:
// 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.)
That would not work if it was without the .current
:如果没有
.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');
ref
-propertyref
属性Even in cases where you might think you never want to set a value, eg:即使在您可能认为您永远不想设置值的情况下,例如:
const inputRef = useRef();
return <input ref={ inputRef } />; // input.ref becomes the internal useRef-object
the input component needs something it can attach itself to.输入组件需要它可以附加到自己的东西。 Eg a fictional implementation might look something like:
例如,一个虚构的实现可能看起来像:
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;
}
};
This would not work without the .current
:如果没有
.current
,这将无法工作:
// input.ref was the internal useRef-object, and now becomes thisDomObject.
// The internal useRef-object stays unchanged.
props.ref = thisDomObject;
I think the property name "current" is just a more or less arbitrarily choosen name that doesn't matter.我认为属性名称“当前”只是一个或多或少任意选择的名称,并不重要。 The only important thing is, that it is a property .
唯一重要的是,它是一个属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.