React Refs

Refs 是 React 中 references（引用）的简写。 它类似于 React 中的 keys（键）。 它是一个属性，使存储对特定 DOM 节点或 React 元素的引用成为可能。 它提供了一种访问 React DOM 节点或 React 元素并与之交互的方式。 当我们想要更改子组件的值，而不使用 props 时，可以使用它。

何时使用 Refs

Refs 可以在以下情况下使用

• 当我们需要 DOM 测量，例如管理焦点、文本选择或媒体播放时。
• 它用于触发命令式动画。
• 与第三方 DOM 库集成时。
• 它也可以用作回调。

何时不使用 Refs

• 对于任何可以用 声明式 完成的事情，应避免使用它。 例如，不要在 Dialog 组件上使用 open() 和 close() 方法，而是需要将 isOpen prop 传递给它。
• 您应该避免过度使用 Refs。

如何创建 Refs

在 React 中，可以使用 React.createRef() 创建 Refs。 可以通过 ref 属性将其分配给 React 元素。 通常，在创建组件时将其分配给实例属性，然后可以在整个组件中引用它。

如何访问 Refs

在 React 中，当 ref 传递给 render 方法内部的元素时，可以通过 ref 的 current 属性访问对节点的引用。

Refs current 属性

ref 值取决于节点的类型

• 当 ref 属性用于 HTML 元素时，使用 React.createRef() 创建的 ref 会接收底层 DOM 元素作为其 current 属性。
• 如果 ref 属性用于自定义类组件，则 ref 对象会接收组件的 已挂载 实例作为其 current 属性。
• ref 属性不能用于 函数组件，因为它们没有实例。

将 Ref 添加到 DOM 元素

在下面的示例中，我们添加一个 ref 来存储对 DOM 节点或元素的引用。

输出

将 Ref 添加到 Class 组件

在下面的示例中，我们添加一个 ref 来存储对 class 组件的引用。

示例

输出

Callback refs

在 React 中，还有另一种使用 refs 的方法，称为“callback refs”，它在 设置 和 取消设置 refs 时提供更多的控制。 React 不是通过 createRef() 方法创建 refs，而是允许通过将回调函数传递给组件的 ref 属性来创建 refs。 它看起来像下面的代码。

回调函数用于在实例属性中存储对 DOM 节点的引用，并且可以在其他地方访问。 可以如下访问它

下面的示例有助于理解 callback refs 的工作原理。

在上面的示例中，当组件 挂载 时，React 将调用 "ref" 回调来存储对输入 DOM 元素的引用，并且当组件 卸载 时，使用 null 调用它。 Refs 在 componentDidMount 或 componentDidUpdate 触发之前始终是 最新的。 组件之间传递的 callback refs 与您可以使用 React.createRef() 创建的对象 refs 相同。

输出

将 Ref 从一个组件转发到另一个组件

Ref 转发是一种用于通过组件将 ref 传递给其子组件之一的技术。 可以通过使用 React.forwardRef() 方法来执行此操作。 这种技术在使用 高阶组件 时特别有用，并且专门用于可重用组件库。 最常见的示例如下所示。

示例

在上面的示例中，有一个组件 TextInput，它有一个子组件作为输入字段。 现在，要向下传递或转发 ref 到输入，首先，创建一个 ref，然后将你的 ref 向下传递给 <TextInput ref={inputRef}>。 之后，React 将 ref 作为第二个参数转发到 forwardRef 函数。 接下来，我们将这个 ref 参数向下转发到 <input ref={ref}>。 现在，可以在 inputRef.current 访问 DOM 节点的值。

React with useRef()

它在 React 16.7 及更高版本中引入。 它有助于访问 DOM 节点或元素，然后我们可以与该 DOM 节点或元素进行交互，例如聚焦输入元素或访问输入元素值。 它返回 ref 对象，其 .current 属性初始化为传递的参数。 返回的对象在组件的生命周期内持久存在。

语法

示例

在下面的代码中，useRef 是一个分配给变量 inputRef 的函数，然后附加到 HTML 元素中称为 ref 的属性，您想要引用它。