当前位置： 技术文章>> 什么是React中的Ref，它有什么用？
文章标题：什么是React中的Ref，它有什么用？
在React的世界里，`Ref` 是一个强大的特性，它允许我们直接访问DOM节点或在render方法中创建的React元素。尽管React的核心理念之一是“数据驱动视图”，即UI的变化应该由状态（state）和属性（props）的变化自动触发，但在某些情况下，我们确实需要直接操作DOM元素或React组件实例，这时候`Ref`就显得尤为重要了。
### Ref 的基本概念
在React中，`Ref` 提供了一种方式来访问在render方法中创建的DOM节点或React元素。与DOM操作库（如jQuery）中直接通过选择器查询DOM节点不同，React的`Ref`提供了更“React式”的方法来访问和操作DOM。通过给元素或组件添加`ref`属性，并为其指定一个回调函数或React的`createRef`方法创建的引用对象，我们可以在组件的生命周期内或事件处理函数中访问到这个元素。
### Ref 的使用场景
虽然React鼓励我们尽可能避免直接操作DOM，但在以下场景中，`Ref` 是不可或缺的：
1. **管理焦点、文本选择或媒体播放**：在需要程序化地控制焦点、选择文本或播放媒体时，直接访问DOM元素是必需的。
2. **触发强制动画**：某些动画效果可能需要直接操作DOM来实现，特别是在第三方库或原生API不支持React式动画时。
3. **集成第三方DOM库**：当使用React与需要直接DOM引用的第三方库（如地图、图表库等）集成时，`Ref` 可以帮助我们实现这一点。
4. **测量DOM元素的大小或位置**：在需要动态调整布局或进行复杂的布局计算时，可能需要直接获取DOM元素的尺寸或位置信息。
5. **管理React组件实例**：通过`Ref`，我们还可以访问类组件的实例，这在需要调用类组件中的方法时非常有用。
### Ref 的实现方式
在React中，`Ref` 可以通过几种方式来实现：
1. **回调函数Refs**：这是React早期版本中引入的一种`Ref` 实现方式。通过在元素上设置`ref`属性为一个函数，当元素被挂载或卸载时，这个函数会被调用，并传入当前的DOM元素作为参数。然而，随着React的更新，这种方式逐渐被更现代的`createRef`和`useRef` API所取代。
2. **createRef 方法**（用于类组件）：在类组件中，可以通过React提供的`React.createRef()`方法创建`Ref`。这个方法返回一个可变的对象，其`.current`属性被初始化为`null`。当`ref`属性附加到React元素上时，`.current`属性将被设置为相应的DOM元素或组件实例。
3. **useRef Hook**（用于函数组件）：在函数组件中，没有`this`关键字，因此不能使用`createRef`。但React提供了`useRef` Hook，允许我们在函数组件中使用`Ref`。与`createRef`类似，`useRef`也返回一个可变的对象，其`.current`属性可以保存任何值，包括DOM元素或组件实例。但与`createRef`不同的是，`useRef`的生命周期与组件的渲染无关，它会在组件的整个生命周期内保持不变。
### Ref 的示例
#### 类组件中使用 createRef
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
this.myRef.current.focus();
}
render() {
return ;
}
}
```
在这个例子中，我们创建了一个类组件`MyComponent`，并在其构造函数中通过`React.createRef()`创建了一个`Ref`。然后，在`componentDidMount`生命周期方法中，我们通过`this.myRef.current`访问到了输入框DOM元素，并调用了其`focus`方法，使输入框在页面加载时自动获得焦点。
#### 函数组件中使用 useRef
```jsx
import React, { useRef, useEffect } from 'react';
function MyFunctionComponent() {
const myRef = useRef(null);
useEffect(() => {
myRef.current.focus();
}, []); // 空依赖数组表示这个effect只在组件挂载时运行一次
return ;
}
```
在函数组件中，我们通过`useRef` Hook创建了一个`Ref`，并通过`ref`属性将其附加到输入框上。然后，在`useEffect` Hook中，我们使用了这个`Ref`来访问输入框DOM元素，并调用其`focus`方法。注意，由于`useEffect`的依赖数组为空，这个effect只会在组件挂载时运行一次，这与类组件中的`componentDidMount`生命周期方法类似。
### Ref 与 forwardRef
在某些情况下，我们可能需要在父组件中访问子组件的DOM节点或组件实例。为了实现这一点，React提供了`forwardRef` API。通过`forwardRef`，我们可以将`ref`自动地通过组件树透传下去，直到它找到对应的DOM节点或组件实例。
```jsx
const FancyButton = React.forwardRef((props, ref) => (
));
// 你可以这样使用FancyButton组件，并给它传递一个ref
const ref = React.createRef();
Click me! ;
```
在这个例子中，`FancyButton`是一个通过`forwardRef`创建的组件，它接受一个`ref`参数并将其直接附加到了内部的`