useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象，其 current 属性可以存储任何可变值。它最常见的用途是直接访问 DOM 元素或 React 组件实例，从而进行命令式操作，例如聚焦、测量或触发动画。本文将详细介绍如何在 React 函数组件中使用 useRef 来获取并操作 JSX 元素。
在 React 应用开发中，我们通常通过状态（State）和属性（Props）来管理组件的数据和行为。然而，在某些特定场景下，我们需要直接与 DOM 元素进行交互，例如控制表单元素的焦点、播放或暂停媒体、测量元素尺寸等。这时，React 提供的 useRef Hook 就显得尤为重要。
理解 useRef 的作用
useRef Hook 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。当 ref 对象被附加到 JSX 元素上时，其 .current 属性将指向该 DOM 元素实例。
与 useState 不同，useRef 不会触发组件重新渲染。这意味着你可以安全地改变 ref.current 的值，而不会导致不必要的组件更新。
useRef 基本使用步骤
要通过 useRef 访问 JSX 元素，你需要遵循以下几个简单步骤：
1. 导入 useRef Hook
首先，在你的 React 组件文件的顶部导入 useRef：
import React, { useRef } from 'react';2. 声明 Ref 变量
在你的函数组件内部，调用 useRef() 来声明一个 ref 变量。通常，我们会将其初始化为 null，因为在组件首次渲染时，它还没有被绑定到任何 DOM 元素：
function MyComponent() {
const myElementRef = useRef(null); // 初始化为 null
// ...
}3. 将 Ref 绑定到 JSX 元素
接下来，将声明的 ref 变量通过 ref 属性绑定到你想要访问的 JSX 元素上。当 React 渲染这个元素时，myElementRef.current 将会被赋值为该 DOM 元素的实例：
function MyComponent() {
const myElementRef = useRef(null);
return (
<div>
<div ref={myElementRef}>这是一个我想要访问的元素</div>
{/* 其他 JSX */}
</div>
);
}4. 通过 ref.current 访问元素
一旦 ref 被绑定到元素上，你就可以通过 myElementRef.current 来访问该 DOM 元素。需要注意的是，ref.current 在组件首次渲染完成之前可能为 null，因此在访问它时最好进行非空检查。通常，你会在事件处理函数、useEffect Hook 或其他生命周期方法中访问 ref.current。
function MyComponent() {
const myElementRef = useRef(null);
const handleClick = () => {
// 确保 ref.current 不为 null
if (myElementRef.current) {
// 现在你可以访问并操作这个 DOM 元素了
console.log('元素内容:', myElementRef.current.textContent);
myElementRef.current.style.backgroundColor = 'yellow';
}
};
return (
<div>
<div ref={myElementRef}>这是一个我想要访问的元素</div>
<button onClick={handleClick}>点击访问元素</button>
</div>
);
}示例：在 React 组件中访问 DOM 元素
以下是一个完整的示例，展示了如何使用 useRef 来访问一个 div 元素，并在按钮点击时改变其背景颜色和打印其文本内容：
import React, { useRef, useEffect } from 'react';
function ElementAccessor() {
// 1. 声明一个 ref 变量
const targetElementRef = useRef(null);
// 可以在 useEffect 中访问 DOM 元素，确保它已经渲染到页面上
useEffect(() => {
if (targetElementRef.current) {
console.log('组件加载后，元素已挂载:', targetElementRef.current);
// 可以在这里进行一些初始化操作，例如聚焦
// targetElementRef.current.focus();
}
}, []); // 空依赖数组表示只在组件挂载时执行一次
const highlightElement = () => {
// 确保 ref.current 不为 null
if (targetElementRef.current) {
// 访问并操作 DOM 元素
targetElementRef.current.style.backgroundColor = '#e0ffe0'; // 浅绿色高亮
targetElementRef.current.style.border = '2px solid green';
console.log('元素文本内容:', targetElementRef.current.textContent);
}
};
const resetElement = () => {
if (targetElementRef.current) {
targetElementRef.current.style.backgroundColor = ''; // 移除背景色
targetElementRef.current.style.border = ''; // 移除边框
}
};
return (
<div style={{ padding: '20px', border: '1px solid #ccc' }}>
<h2>使用 useRef 访问 DOM 元素</h2>
{/* 2. 将 ref 绑定到 JSX 元素 */}
<p ref={targetElementRef} style={{ padding: '10px', border: '1px dashed blue' }}>
这是我想要通过 Ref 访问和操作的段落元素。
</p>
<button onClick={highlightElement} style={{ marginRight: '10px' }}>
高亮元素
</button>
<button onClick={resetElement}>
重置样式
</button>
<p><em>请注意查看控制台输出和元素的样式变化。</em></p>
</div>
);
}
export default ElementAccessor;注意事项与最佳实践
-
ref.current 的生命周期：
- 在组件首次渲染时，ref.current 可能为 null。只有当 React 将 ref 附加到 DOM 元素后，它才会有值。
- 在 useEffect 或事件处理函数中访问 ref.current 是安全的，因为此时组件已经挂载。
- 当组件卸载时，ref.current 会再次变为 null。
-
避免过度使用 useRef：
- useRef 主要用于需要直接命令式操作 DOM 的场景。
- 对于大部分 UI 交互和数据管理，应优先使用 React 的声明式范式，即通过状态（useState）和属性（props）来控制组件的行为和外观。
- 例如，如果只是为了显示/隐藏元素，通过状态来控制条件渲染或样式会是更好的选择。
-
Ref 的转发：
- 如果你需要将一个 ref 从父组件传递给子组件内部的某个 DOM 元素，你需要使用 forwardRef。这允许父组件直接获取子组件内部的 DOM 元素引用。
-
不要在渲染过程中读取或写入 ref.current：
- 在组件的渲染逻辑（即 return 语句块）中读取或写入 ref.current 可能会导致不可预测的行为，因为它可能在渲染期间发生变化。
- 应该在 useEffect 或事件处理函数中进行这些操作。
总结
useRef 是 React 提供的一个强大工具，它弥补了 React 声明式编程模型在需要直接操作 DOM 时的不足。通过正确地使用 useRef，开发者可以在不破坏 React 核心理念的前提下，实现对底层 DOM 元素的精确控制。理解其工作原理和适用场景，并遵循最佳实践，将有助于你构建更健壮、更高效的 React 应用。
