【React】useImperativeHandle和forwardRef方法一定要结合起来用吗

在 React 中，useImperativeHandle 和 forwardRef 通常需要结合使用，但并不是绝对的，它们有各自的作用和使用场景。下面我们详细分析这两个方法的用途、为什么它们经常一起使用，以及是否有独立使用的情况。

---

一、useImperativeHandle 和 forwardRef 的作用

1. forwardRef 的作用

forwardRef 是一个高阶组件，用于将父组件的 ref 转发给子组件的某个 DOM 元素或子组件内部的引用。

示例：不使用 forwardRef

如果直接在父组件中传递 ref 给子组件，React 默认不允许这样做，因为 ref 只能直接绑定到 DOM 元素，而不能绑定到组件。

const Child = () => {
  return <input type="text" />;
};

const Parent = () => {
  const inputRef = React.createRef();

  return (
    <div>
      {/* 这里会报错，因为 ref 无法直接传递给自定义组件 */}
      <Child ref={inputRef} />
    </div>
  );
};

使用 forwardRef 转发 ref

通过 forwardRef，我们可以将父组件的 ref 转发到子组件内部的某个 DOM 元素。

const Child = React.forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

const Parent = () => {
  const inputRef = React.createRef();

  return (
    <div>
      {/* 这里不会报错，ref 被正确转发到 input 元素 */}
      <Child ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
};

---

2. useImperativeHandle 的作用

useImperativeHandle 是一个 Hook，用于自定义暴露给父组件的 ref 对象。默认情况下，ref 只暴露绑定的 DOM 元素或组件实例。如果需要自定义暴露的内容，就可以使用 useImperativeHandle。

示例：自定义暴露的内容

import React, { useRef, useImperativeHandle, forwardRef } from "react";

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

  // 自定义暴露的内容
  useImperativeHandle(ref, () => ({
    focusInput: () => inputRef.current.focus(),
    clearInput: () => (inputRef.current.value = ""),
  }));

  return <input ref={inputRef} type="text" />;
});

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.focusInput()}>Focus</button>
      <button onClick={() => childRef.current.clearInput()}>Clear</button>
    </div>
  );
};

在这个例子中，useImperativeHandle 自定义了 ref 的暴露内容，父组件可以调用 focusInput 和 clearInput 方法，而不是直接操作 DOM。

---

二、为什么 useImperativeHandle 和 forwardRef 通常一起使用？

1. useImperativeHandle 需要 ref

useImperativeHandle 的核心功能是自定义 ref 暴露的内容，而 ref 是通过 forwardRef 从父组件传递到子组件的。如果没有 forwardRef，父组件就无法将 ref 传递到子组件，也就无法使用 useImperativeHandle。

2. forwardRef 提供了 ref 转发能力

forwardRef 是 useImperativeHandle 的基础，只有通过 forwardRef，子组件才能接收到父组件传递的 ref，进而使用 useImperativeHandle 自定义暴露的内容。

因此，useImperativeHandle 和 forwardRef 通常需要结合使用。

---

三、useImperativeHandle 可以单独使用吗？

情况 1：单独使用 useImperativeHandle（不常见）

理论上，useImperativeHandle 可以单独使用，但它的意义不大，因为它的作用是自定义 ref 的暴露内容，而如果没有 forwardRef，父组件无法传递 ref，也就无法访问自定义的内容。

示例：

const Child = (props) => {
  const inputRef = React.useRef();

  // 单独使用 useImperativeHandle
  React.useImperativeHandle(props.innerRef, () => ({
    focus: () => inputRef.current.focus(),
  }));

  return <input ref={inputRef} />;
};

const Parent = () => {
  const ref = React.useRef();

  return (
    <div>
      {/* 这里无法直接传递 ref */}
      <Child innerRef={ref} />
      <button onClick={() => ref.current.focus()}>Focus</button>
    </div>
  );
};

在这个例子中，我们手动通过 props.innerRef 传递了一个 ref，但这种用法并不推荐，因为它破坏了 React 的 ref 传递模式。

---

情况 2：单独使用 forwardRef

forwardRef 可以单独使用，而不需要 useImperativeHandle。如果只需要简单地将 ref 转发到子组件的某个 DOM 元素，就不需要 useImperativeHandle。

示例：

const Child = React.forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

const Parent = () => {
  const inputRef = React.createRef();

  return (
    <div>
      <Child ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
};

在这个例子中，forwardRef 已经满足需求，因为我们只需要将 ref 绑定到 input。

---

四、总结

方法	用途	是否需要结合使用
forwardRef	将父组件的 ref 转发到子组件的某个 DOM 元素或组件内部引用。	可以单独使用，不需要 useImperativeHandle。
useImperativeHandle	自定义 ref 暴露的内容，通常用于封装复杂的组件逻辑。	通常需要结合 forwardRef，否则无法接收父组件的 ref。

最佳实践

• 如果只需要简单地将 ref 绑定到某个 DOM 元素，使用 forwardRef 即可。
• 如果需要自定义 ref 的暴露内容（如封装方法），使用 useImperativeHandle 和 forwardRef 结合。

推荐示例

最常见的用法是两者结合：

import React, { useRef, useImperativeHandle, forwardRef } from "react";

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

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
  }));

  return <input ref={inputRef} />;
});

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.focus()}>Focus</button>
    </div>
  );
};

export default Parent;

通过这种方式，你可以封装复杂的逻辑，同时保持组件的清晰性和可维护性。