在 React 开发中，组件之间的交互大多基于 props 和 state。但是，有时我们需要更直接地访问一个组件的内部方法或属性，例如，外部控制一个自定义输入组件的焦点。这时，Refs 就派上用场（学习 useRef👉《精读React hook（四）：useRef的多维用途》），但 Refs 本身的功能是有限的，它默认只能访问 DOM 节点或组件实例。这时，如何自定义我们想要暴露给父组件的实例方法或属性呢？答案就是使用useImperativeHandle。

useImperativeHandle是一个相对少用但必要的时候能让你的 React 代码更灵活的 hook，本文我们就来探讨一下useImperativeHandle的使用方法和使用场景。

`useImperativeHandle`的使用

useImperativeHandle通常与forwardRef一起使用，以便将 ref 传递给函数组件，用法定义如下：

csharp 复制代码

const ForwardRefChildComponents = forwardRef(function ChildComponents(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      // ... your methods ...
    };
  }, []);
})

基础示例

想象一个简单的例子，你有一个自定义输入组件，你想为其提供一个方法来清除输入内容，但不想暴露整个组件或 DOM 节点。

ini 复制代码

const ForwardedCustomInput = forwardRef(function CustomInput(props, ref) {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    clear: () => {
      inputRef.current.value = '';
    }
  }));

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

现在，当你使用ForwardedCustomInput并为其提供一个 ref 时，你可以直接调用clear方法

javascript 复制代码

function App() {
  const inputRef = useRef();

  return (
    <div>
      <ForwardedCustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.clear()}>Clear Input</button>
    </div>
  );
}

当我们点击 "Clear Input" 按钮时，输入框的内容将被清除，这种实现方式让我们没有操作 DOM 节点也能操作完成操作。

线上示例可以到👉 <我的演示站>体验。