6.forwardRef 和 useImperativeHandle 怎么用，解决了什么问题？
来源：https://w0hog67yl81.feishu.cn/wiki/CbiPwGoEQivqBdkJnpicZJD4nah
采集状态：已完成正文采集；正文滚动至底部，按块及代码行号采集

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> 元素上。​

4.

最终，父组件 App 中的 inputRef.current 指向的就不再是 MyInput 组件本身，而是它内部的真实 input DOM 节点。这样，我们就能成功调用 focus() 方法了。

forwardRef 解决了 ref 无法直接传递给函数组件的问题，但它也带来了新的思考：我们真的需要把整个 DOM 节点都暴露给父组件吗？​

​

“过度暴露”的问题与封装的意义​

​

直接暴露整个 DOM 节点意味着父组件可以对子组件的内部结构做任何事情，例如直接修改 inputRef.current.style.backgroundColor = 'red'。这破坏了子组件的封装性。​

​

理想情况下，子组件应该像一个黑盒，只对外提供明确且有限的接口。父组件不应该关心子组件内部的 DOM 结构是怎样的，只需要调用约定好的方法即可。这种关注点分离的原则，能让我们的代码更加健壮和易于维护。​

​

useImperativeHandle: 自定义暴露给父组件的“API”​

​

useImperativeHandle 正是为了解决这个问题而生的。它允许我们**自定义** ref 的值，而不是简单地将整个 DOM 节点暴露出去。​

​

这个 Hook 必须和 forwardRef 一起使用。我们可以把它看作是 forwardRef 这条管道末端的一个“阀门”或“适配器”，它精确地控制了流出管道的内容。​

​

我们来升级一下刚才的 MyInput 组件。这次，我们只希望父组件能调用 focus 方法，同时再额外提供一个 clear 方法来清空输入框。​

​

import { forwardRef, useImperactiveHandle, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 1. 使用 useImperativeHandle 来自定义 ref 的值
  useImperativeHandle(
    ref, // 第一个参数：接收父组件的 ref
    () => ({
      // 第二个参数：返回一个对象，这个对象会成为父组件 ref.current 的值
      focus: () => {
        if (inputRef.current) {
          inputRef.current.focus();
        }
      },
      clear: () => {
        if (inputRef.current) {
          inputRef.current.value = '';
        }
      },
      // 注意：我们没有暴露整个 input DOM 节点
    }),
    [] // 第三个参数：依赖项数组，保持和 useEffect, useMemo 一致
  );

  // 组件内部依然使用自己的 ref
  return <input {...props} ref={inputRef} placeholder="点击按钮操作" />;
});

function App() {
  const customInputRef = useRef(null);

  const handleFocus = () => {
    if (customInputRef.current) {
      customInputRef.current.focus(); // 调用我们暴露的 focus 方法
    }
  };
  
  const handleClear = () => {
    if (customInputRef.current) {
      customInputRef.current.clear(); // 调用我们暴露的 clear 方法
    }
  };

  return (
    <div>
      <MyInput ref={customInputRef} />
      <div style={{ marginTop: '10px' }}>
        <button onClick={handleFocus}>Focus Input</button>
        <button onClick={handleClear} style={{ marginLeft: '8px' }}>
          Clear Input
        </button>
      </div>
    </div>
  );
}

export default App;

​

在这个升级版中：​

1.
MyInput 内部创建了一个自己的 inputRef 来管理 <input> 元素。​

2.
useImperativeHandle 登场，它接收父组件的 ref，并定义了当 ref.current 被访问时，应该返回什么。​

3.
我们返回了一个包含 focus 和 clear 方法的对象。这个对象就是我们为 MyInput 组件设计的“命令式 API”。​

4.

现在，在父组件 App 中，customInputRef.current 不再是 DOM 节点，而是 { focus: () => ..., clear: () => ... } 这个对象。父组件只能调用我们明确暴露的方法，无法再直接操作 DOM。

总结：协作与分工​

​

现在，我们可以清晰地总结 forwardRef 和 useImperativeHandle 的关系了：​

​

•
forwardRef：**建立通道**。它的核心职责是解决 ref 的转发问题，让 ref 可以穿透函数组件的边界，抵达其内部。​

•

useImperativeHandle：**定义接口**。它站在通道的末端，决定了最终暴露给父组件的是什么。它将组件的内部实现细节隐藏起来，只提供一个干净、受控的接口。

它们共同实现了一种优雅的父子通信模式：既保留了命令式操作的直接性（如 focus()），又维护了组件良好的封装性和清晰的边界。​

​

在日常开发中，当我们确实需要从父组件调用子组件的方法时，组合使用 forwardRef 和 useImperativeHandle 是一个值得推荐的最佳实践。它能帮助我们构建出既灵活又易于长期维护的组件库。​

​