前端 - 请问我们在React中应该如何理解ref呢？

Question

请问一下：React中我们一般如何理解ref？

我们经常看到useRef的定义：

const myRef: React.MutableRefObject<Obj | null> = useRef(null);

有时候我们可以看到是DOM节点的进行关联。

请问我们在React中应该如何理解ref呢，是否是指的就是用于绑定DOM节点的？

Answer 1

在React中，`ref` 是一种访问在render方法中创建的React元素或在DOM节点上的方式。虽然`ref`经常用于获取DOM节点，但其用途远不止于此。

### 理解`ref`

1. **访问DOM节点**：
   - 这是最常见的用途之一。通过`ref`，你可以直接访问DOM元素，并调用其上的方法或访问其属性。例如，你可以使用`ref`来聚焦一个输入框，或获取一个`<div>`的滚动高度。

2. **存储任意可变值**：
   - `useRef`不仅限于DOM元素。它实际上是一个可以持有任何可变值的“容器”。这个值在组件的整个生命周期内保持不变（即，`ref.current`对象本身不会在re-renders之间改变），但你可以修改`ref.current`属性来持有新的值。这对于需要在多次渲染之间保持状态而又不触发重新渲染的情况非常有用。

3. **避免闭包问题**：
   - 在类组件或函数组件的回调函数中，使用`ref`可以避免闭包陷阱，因为`ref`在整个组件生命周期内持有相同的对象。这在处理异步操作或定时器时尤其有用，因为你可以安全地在回调中访问最新的组件状态或属性。

4. **与第三方库集成**：
   - 有些第三方库可能需要直接访问DOM元素来工作，例如图表库或动画库。在这种情况下，你可以使用`ref`将这些库与React组件集成。

### `useRef`定义

const myRef: React.MutableRefObject<Obj | null> = useRef(null);

这里的`useRef`创建了一个可变的ref对象，其`.current`属性被初始化为传入的参数（在这个例子中是`null`）。之后，你可以将任何值赋给`myRef.current`，并且这个值在整个组件的生命周期内都可以通过`myRef.current`来访问。

### 总结

因此，`ref`在React中不仅仅是用于绑定DOM节点的。它提供了一种在React的函数式组件中直接访问和操作DOM元素或持有任意可变值的方法。理解这一点对于充分利用React的功能和构建高性能的React应用至关重要。