在 React 中，useRef、ref 属性以及 forwardRef 是处理“引用”（访问 DOM 节点或组件实例）的核心概念

在 React 中useRef、ref属性以及forwardRef是处理“引用”访问 DOM 节点或组件实例的核心概念。它们经常一起使用但职责完全不同。以下是它们的核心区别、使用方法及组合示例1. 核心概念与区别特性ref(属性)useRef(Hook)forwardRef(API)本质JSX 中的一个特殊属性。一个React Hook用于创建 ref 对象。一个高阶函数用于将 ref 转发给子组件。主要作用标记“我想访问这个元素/组件”。1. 创建可变的容器 (ref.current)。2. 存储不触发重渲染的数据。3. 获取 DOM 节点。允许父组件通过 ref 直接访问函数子组件内部的 DOM 节点。触发重渲染否否(修改current不会重渲染)否典型场景挂在到input或自定义组件上。在组件内部初始化引用存储定时器、DOM 节点等。编写可复用的自定义组件如Input,Button并希望外部能控制其焦点或动画。2. 详细用法解析A.useRef创建引用的容器useRef返回一个对象{ current: ... }这个对象在组件的整个生命周期内保持不变。两大用途访问 DOM 节点配合ref属性使用。存储可变变量类似state但不触发重渲染适合存定时器、上一次的值等。import { useRef, useEffect } from react; function MyComponent() { // 1. 创建 ref 对象初始值为 null const inputRef useRef(null); const countRef useRef(0); // 2. 用于存储不触发渲染的变量 useEffect(() { // 组件挂载后自动聚焦输入框 // inputRef.current 此时指向真实的 DOM 节点 if (inputRef.current) { inputRef.current.focus(); } // 修改 countRef.current 不会导致组件重新渲染 countRef.current 1; }, []); return ( // 将 ref 对象绑定到 DOM 元素 input ref{inputRef} typetext placeholder我会自动聚焦 / ); }B.forwardRef打通父子组件的引用通道默认情况下函数组件不能接收ref。如果你在函数组件上使用ref它会丢失或者在旧版本报错。forwardRef的作用就是让函数组件能够“透传”这个 ref使其指向组件内部的某个 DOM 元素。使用场景当你封装了一个通用组件如FancyInput希望使用它的父组件能直接控制它如调用.focus()。import { forwardRef } from react; // 定义子组件使用 forwardRef 包裹 // 注意第二个参数 ref 是由父组件传下来的 const FancyInput forwardRef((props, ref) { return ( div classNamefancy-wrapper label{props.label}/label {/* 将接收到的 ref 绑定到内部的 input 上 */} input ref{ref} {...props} / /div ); }); export default FancyInput;C. 组合使用父组件通过useRefforwardRef控制子组件这是最完整的链路父组件创建 ref (useRef) - 传给子组件 (ref属性) - 子组件接收并转发 (forwardRef) - 绑定到 DOM。import { useRef } from react; import FancyInput from ./FancyInput; // 上面定义的组件 function ParentComponent() { // 1. 父组件创建 ref const inputElementRef useRef(null); const handleFocusClick () { // 3. 父组件直接操作子组件内部的 DOM if (inputElementRef.current) { inputElementRef.current.focus(); inputElementRef.current.value 被父组件控制了; } }; return ( div {/* 2. 将 ref 传给自定义子组件 */} FancyInput ref{inputElementRef} label请输入 placeholder点击按钮聚焦我 / button onClick{handleFocusClick} 聚焦子组件输入框 /button /div ); }3. 常见误区与总结为什么不能直接在函数组件上用ref函数组件没有实例不像 Class 组件有this所以默认没法把ref绑定到组件本身。forwardRef是一种显式的机制告诉 React“我知道我在做什么请把这个 ref 传递给我内部的某个 DOM”。useRef和useState的区别useState数据改变 -触发重渲染。useRef数据 (current) 改变 -不触发重渲染。技巧如果你需要记录一个值但不希望界面刷新例如记录上一次的 props 值或者存储setInterval的 ID请用useRef。什么时候必须用forwardRef当你开发库组件或通用 UI 组件如 Ant Design, Material UI 中的输入框、按钮且需要支持用户通过ref来控制焦点、动画或测量尺寸时。如果是简单的内部逻辑通常不需要。一句话总结useRef是用来制造引用对象的在组件内部。ref是用来挂载引用到元素上的在 JSX 中。forwardRef是用来传递引用穿过组件边界的在子组件定义处。