React Refs的多种用法归纳整理

Posted 2023-04-25

参考技术A 以前的字符串式refs（this.refs.xxx）已被遗弃，这里整理的都是最新版本的用法

前言：

先说下React refs的主要用途吧，主要用于直接调用某个节点或者组件实例。

我把它的各种用法大致分为了两大类

一类：是没有跨越中间子组件的节点或实例，也就是单个组件内部调用其直接return中包含的React元素，或者是return中包含其他自定义组件。

二类：是跨越了中间子组件的节点或实例，如：父组件调用自定义组件中的某个React元素。

特别说明：ref是不能作用到函数组件上的，但是可以在函数组件中使用ref，因为函数组件没有实例。ref本身返回也是某个节点，或者某个组件的实例。

这样说着似乎有些抽象空洞，下边上张对比图好了

下边具体笔录下这2类具体的用法

1：常规用法

React.createRef() 和 ref的配合使用

用例：

2：ref回调（个人最爱的一种方式）

这种低版本的React也是支持的，它不同于createRef()，它接受一个函数，以dom元素或者React组件实例作为参数，以使它们能在其他地方被存储和访问。

一种：ref转发

主要通过forwardRef 和 createRef的配合使用

官方并不推荐使用它，下边是官方的建议内容！

当你开始在组件库中使用 forwardRef 时，你应当将其视为一个破坏性更改，并发布库的一个新的主版本。  这是因为你的库可能会有明显不同的行为（例如 refs 被分配给了谁，以及导出了什么类型），并且这样可能会导致依赖旧行为的应用和其他库崩溃。

出于同样的原因，当 React.forwardRef 存在时有条件地使用它也是不推荐的：它改变了你的库的行为，并在升级 React 自身时破坏用户的应用。

用例：

在高阶组件中转发 refs 

用例：

二种：将ref的值作为组件的属性往下传递到目标节点或者实例。

1：传递createRef

用例：

2：传递ref回调

用例：

每天30s系列|介绍 React 中的 Refs 及其使用场景？

回答

Refs 提供了一种方式，用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用，但是如下一些场景使用 Refs 却更为适合：

• 处理焦点、文本选择或者媒体的控制

• 触发必要的动画

• 集成第三方 DOM 库

Refs 是使用 React.createRef() 方法创建的，他通过 ref 属性附加到 React 元素上。要在整个组件中使用 Refs，需要将 ref 在构造函数中分配给其实例属性：

class MyComponent extends React.Component { constructor(props) { super(props) this.myRef = React.createRef() }
 render() { return <div ref={this.myRef} /> }}

由于函数组件没有实例，因此不能在函数组件上直接使用 ref：

function MyFunctionalComponent() { return <input />;}
class Parent extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); } render() { // 这将不会工作！ return ( <MyFunctionalComponent ref={this.textInput} /> ); }}

但可以通过闭合的帮助在函数组件内部进行使用 Refs：

function CustomTextInput(props) { // 这里必须声明 textInput，这样 ref 回调才可以引用它 let textInput = null;
 function handleClick() { textInput.focus(); }
 return ( <div> <input type="text" ref={(input) => { textInput = input; }} />
 <input type="button" value="Focus the text input" onClick={handleClick} /> </div> );}

加分回答

• 不应该过度的使用 Refs

• ref 的返回值取决于节点的类型：

• 当 ref 属性被用于一个普通的 HTML 元素时，React.createRef() 将接收底层 DOM 元素作为他的 current 属性以创建 ref。

• 当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。

• 当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。