React 中 ref 如何使用？

**React 中 Ref 的使用**

在 React 中，Ref 是一个用于访问 DOM 元素或组件实例的钩子。它允许我们直接操作 DOM 元素或组件实例，而不是通过 JSX 或 props 来间接地进行操作。

###什么是 Ref？

Ref（短语为“引用”）是一个特殊类型的变量，用于存储一个 DOM 元素或组件实例的引用。通过使用 Ref，我们可以直接访问和操作这些元素或实例。

### 为什么需要 Ref？

在 React 中，我们通常使用 JSX 来描述 UI 的结构。但是，有些情况下，我们需要直接操作 DOM 元素或组件实例，例如：

* 获取一个 DOM 元素的尺寸或位置* 添加事件监听器到一个 DOM 元素上* 直接修改一个组件的状态在这些情况下，Ref 就派上了用场。

### 如何使用 Ref？

有两种方式可以使用 Ref：`createRef()` 和 `useRef()`。

####1. 使用 `createRef()`

`createRef()` 是一个用于创建 Ref 的函数。它返回一个新的 Ref 实例，可以通过 `current` 属性来访问 DOM 元素或组件实例。

jsximport React, { createRef } from 'react';

function MyComponent() {
 const myRef = createRef();

 return (
 <div>
 <input type="text" ref={myRef} />
 <button onClick={() => console.log(myRef.current.value)}>获取输入值</button>
 </div>
 );
}

在这个例子中，我们使用 `createRef()` 创建了一个 Ref 实例，通过 `ref` 属性将其绑定到了一个 `` 元素上。当我们点击按钮时，会输出当前 `` 元素的值。

####2. 使用 `useRef()`

`useRef()` 是一个用于创建 Ref 的 Hook。它返回一个新的 Ref 实例，可以通过 `current` 属性来访问 DOM 元素或组件实例。

jsximport React, { useRef } from 'react';

function MyComponent() {
 const myRef = useRef(null);

 return (
 <div>
 <input type="text" ref={myRef} />
 <button onClick={() => console.log(myRef.current.value)}>获取输入值</button>
 </div>
 );
}

这个例子与上一个例子相同，唯一的区别是我们使用了 `useRef()` Hook 来创建 Ref 实例。

### 使用 Ref 的注意事项在使用 Ref 时，有几点需要注意：

* Ref 只能用于 DOM 元素或组件实例，而不能用于其他类型的变量。
* Ref 必须通过 `ref` 属性绑定到一个 DOM 元素或组件上，否则它将不会生效。
* 当使用 `useRef()` Hook 时，需要传入一个初始值（例如 `null`），以便可以在组件卸载时清除 Ref。

### 总结在 React 中，Ref 是一个用于访问 DOM 元素或组件实例的钩子。它允许我们直接操作 DOM 元素或组件实例，而不是通过 JSX 或 props 来间接地进行操作。在本文中，我们学习了如何使用 `createRef()` 和 `useRef()` 来创建 Ref 实例，以及在使用 Ref 时需要注意的事项。