6.forwardRef 和 useImperativeHandle 怎么用，解决了什么问题？

用户8691

2025年9月20日修改

forwardRef 与 useImperativeHandle：实现父子组件间的“精准通信”

在日常的 React 开发中，我们习惯于通过 props 实现父组件到子组件的数据单向流动。这种自上而下的数据流保证了应用的稳定性和可预测性。但总有一些场景，我们需要打破这个规则，进行“逆向”操作。​

一个典型的例子是：父组件需要主动触发子组件内部一个输入框的 focus 行为。直接通过 props 传递一个 isFocused 状态虽然可行，但在许多场景下，使用 ref 来直接调用 focus() 方法会更加直观和高效。​

问题在于，React 的函数组件默认是“无实例”的，我们无法像操作类组件或原生 DOM 那样，直接将 ref 附加到函数组件上。​

forwardRef: 打通父子组件的 ref 通道

为了解决这个问题，React 提供了 forwardRef。它的核心作用，是将父组件创建的 ref “转发”到子组件内部的某个特定 DOM 元素上。​

我们可以把 forwardRef 理解为一个管道，它在父组件和子组件的 DOM 元素之间建立了一条直接的连接。​

让我们来看一个具体的场景。我们有一个自定义的输入框组件 MyInput，希望父组件能通过 ref 控制它的聚焦。​

代码块

import { forwardRef, useRef } from 'react';​
​
// 1. 使用 forwardRef 包裹子组件​
const MyInput = forwardRef((props, ref) => {​
  // 2. 将收到的 ref 转发到内部的 input 元素上​
  return <input {...props} ref={ref} placeholder="点击按钮聚焦" />;​
});​
​
function App() {​
  const inputRef = useRef(null);​
​
  const handleFocus = () => {​
    // 3. 现在 ref 指向的是子组件内部的 input DOM 节点​
    if (inputRef.current) {​
      inputRef.current.focus();​
    }​
  };​
​
  return (​
    <div>​
      <MyInput ref={inputRef} />​
      <button onClick={handleFocus} style={{ marginTop: '10px' }}>​
        Focus Input​
      </button>​
    </div>​
  );​
}​
​
export default App;​

在这个例子中：

1.
我们用 forwardRef 包裹了 MyInput 组件。这使得 MyInput 可以接收一个 ref prop。​

2.
forwardRef 的函数参数除了 props，还多了第二个参数 ref。这就是从父组件传递过来的 ref 对象。​

3.
我们将这个 ref 绑定到 MyInput 内部的 <input> 元素上。​

6.forwardRef 和 useImperativeHandle 怎么用，解决了什么问题？​

6.forwardRef 和 useImperativeHandle 怎么用，解决了什么问题？