在 React 开发中，ref 是操作 DOM 的重要桥梁，但当 ref 遇到自定义组件时，往往会出现 “传递障碍”。forwardRef 作为 React 提供的核心 API，专门解决这一问题。本文将从基础到进阶，带您全面掌握 forwardRef 的用法与原理！
一、🤔 为什么需要 forwardRef？—— 先看一个 “失败案例”
假设我们有一个简单的自定义组件 Guang，内部包含一个 input 元素。父组件 App 想通过 ref 获取这个 input 的 DOM 引用，实现页面加载后自动聚焦的功能。
// 子组件：Guang
function Guang(props) {
return <input type="text" />;
}
// 父组件：App
function App() {
const inputRef = useRef(null);
// 尝试在组件挂载后让 input 自动聚焦
useEffect(() => {
inputRef.current?.focus(); // 这里会失效！❌
}, []);
return <Guang ref={inputRef} />; // 直接传递 ref
}
问题所在：
父组件传递的 ref 会被 React 特殊处理，不会作为 props 传入子组件。对于函数组件而言，默认无法接收 ref 参数，因此 inputRef.current 始终是 null，导致自动聚焦失败。
二、✨ forwardRef 是什么？—— 定义与核心作用
forwardRef 是 React 提供的高阶函数，它的作用是让函数组件能够接收并转发父组件传递的 ref，最终绑定到组件内部的 DOM 元素或其他组件上。
- 本质：创建一个 “可接收
ref的组件”，打破父组件与子组件内部 DOM 之间的引用壁垒。 - 场景：当父组件需要直接操作子组件内部的 DOM 元素（如聚焦输入框、滚动到指定位置等）时，必须使用
forwardRef。
三、📝 如何使用 forwardRef？—— 三步实现 ref 转发
我们一步步拆解用法：
步骤 1：定义可接收 ref 的子组件
函数组件需要额外接收 ref 参数（作为第二个参数，第一个是 props），并将其绑定到目标 DOM 元素上。
// 子组件 Guang：接收 props 和 ref 两个参数
function Guang(props, ref) {
console.log("接收的 props：", props);
console.log("接收的 ref：", ref);
return <input type="text" ref={ref} />; // 将 ref 绑定到 input
}
步骤 2：用 forwardRef 包裹组件
通过 forwardRef 处理子组件，使其具备接收 ref 的能力，返回一个新的 “增强版” 组件。
// 用 forwardRef 包裹，生成可转发 ref 的组件 WrapperGuang
const WrapperGuang = forwardRef(Guang);
步骤 3：父组件传递 ref 并使用
父组件像使用普通 DOM 元素一样创建 ref，并传递给经过 forwardRef 处理的子组件，即可获取目标 DOM 引用。
function App() {
const inputRef = useRef(null); // 创建 ref
// 组件挂载后，利用 ref 操作 DOM（自动聚焦）
useEffect(() => {
inputRef.current?.focus(); // 此时 inputRef.current 指向子组件的 input 元素 ✅
}, []);
return <WrapperGuang ref={inputRef} />; // 传递 ref 给子组件
}
效果：页面加载后，子组件中的 input 会自动获得焦点，实现预期功能。
四、🔍 forwardRef 工作原理：ref 是如何 “穿越” 组件的？
- 父组件创建 ref：通过
useRef生成一个ref对象（初始值为null）。 - 传递 ref 给子组件：父组件将
ref作为特殊属性传递给forwardRef处理过的子组件（如WrapperGuang）。 - 子组件接收并转发：
forwardRef会将父组件的ref作为第二个参数传入子组件函数（Guang），子组件再将其绑定到内部的input元素上。 - 父组件操作 DOM：当子组件渲染后，
ref.current会指向input的 DOM 节点，父组件即可通过ref直接操作该节点。
五、⚠️ 注意事项与最佳实践
- ref 不属于 props
父组件传递的ref不会被包含在子组件的props中，因此不能通过props.ref获取。子组件必须显式接收第二个参数ref。 - 仅对函数组件有效
forwardRef主要用于函数组件。类组件本身可以通过createRef或ref回调获取实例，但如果需要转发ref到内部 DOM，需结合React.createRef和ref回调。 - 避免过度使用
ref用于直接操作 DOM，应优先通过props实现组件通信。只有当必须操作 DOM 时（如聚焦、测量尺寸），才使用forwardRef。 - 与高阶组件（HOC）配合
若高阶组件包装了组件，需通过forwardRef确保ref能穿透 HOC 传递到原始组件，避免 “ref 丢失”。
六、🎯 总结
forwardRef 是 React 中实现跨组件 ref 传递的关键 API，它解决了函数组件无法接收父组件 ref 的问题，让父组件能够直接操作子组件内部的 DOM 元素。掌握它的用法，能让我们在处理表单交互、DOM 测量等场景时更加得心应手！
希望本文能帮助您彻底搞懂 forwardRef，快去试试用它优化您的组件吧！💪
