React.js引用用法



我正在努力理解Ref在React中的用法。我在Ant Design文档中看到了一个例子。https://3x.ant.design/components/tag/#components-标签演示控制

有一行代码,我不知道它是如何工作的。

saveInputRef = input => (this.input = input);

用法如下:

<Input ref={this.saveInputRef} ...

但在React文档中,据说您使用React.createRef()方法创建一个ref。

https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

这是另一种使用方式吗?为什么没有React.createRef()方法?

据我所知,有两种不同的Ref,但它们通常一起使用。

A。存在";参考文献";由";createRef";(或者当使用钩子时为"useRef");这将一个值存储在";当前";Ref.的属性。此值不会引起重新应答,并在重新应答后保留。

B。还有ref作为内置组件的属性。此属性用于访问domnode。

通常ref(B)存储在ref(a)中

但是,您可以在参考文献(A)中存储您想要的任何内容。您不一定需要将从ref(B)获得的节点存储在ref(a)中,您也可以直接访问它,这段代码的作用是:

<div ref={node => doSomething(node)}/>

或者只是

<div ref={doSomething}/>

这被称为";callback Ref":

回调参考

React还支持另一种设置refs的方法,称为"回调refs",它可以更精细地控制何时设置和取消设置refs

不是传递createRef()创建的ref属性,而是传递一个函数。该函数接收React组件实例或HTMLDOM元素作为其参数,这些参数可以在其他地方存储和访问

https://reactjs.org/docs/refs-and-the-dom.html#callback-参考

编辑:

更多关于Ref(A)的信息。

本质上,useRef就像一个"盒子",可以在其.current属性中保存可变值

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

但是,useRef()不仅仅用于ref属性。它可以方便地保持任何可变值,类似于在类中使用实例字段的方式

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

请记住,useRef不会在其内容更改时通知您。更改.current属性不会导致重新渲染。如果您想在React将ref附加或分离到DOM节点时运行一些代码,您可能需要使用回调ref

https://reactjs.org/docs/hooks-reference.html#useref

最新更新