【useImperativeHandle Hook】通过子组件暴露相应的属性和方法，实现在父组件中访问子组件的属性和方法

文章目录

引言

在 React 中，useImperativeHandle 是一个用于自定义暴露给父组件的实例值的 Hook。它允许你更细粒度地控制哪些方法和属性可以通过 ref 暴露给父组件。本文将通过一个具体的例子——实现一个可被父组件控制的输入框组件，来详细介绍如何使用 useImperativeHandle。

项目结构

我们的项目结构如下：

src/
├── App.tsx
└── components/
    └── useImperativeHandle/
        ├── MyInput.tsx
        └── MyInputParent.tsx

创建自定义输入框组件

MyInput.tsx

// src/components/useImperativeHandle/MyInput.tsx
import { forwardRef, useImperativeHandle, useRef } from 'react';

type ChildRef = {
  focus: () => void;
  scrollIntoView: () => void;
};

export default forwardRef<ChildRef>(function MyInput(props, ref) {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
    scrollIntoView: () => inputRef.current?.scrollIntoView(),
  }), []);

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

在这个文件中，我们创建了一个名为 MyInput 的自定义输入框组件，并使用 forwardRef 和 useImperativeHandle 来暴露两个方法：focus 和 scrollIntoView。这些方法可以被父组件调用以控制输入框的行为。

父组件中使用自定义输入框组件

MyInputParent.tsx

// src/components/useImperativeHandle/MyInputParent.tsx
import { useRef } from 'react';
import MyInput from './MyInput';

type ChildRef = {
  focus: () => void;
  scrollIntoView: () => void;
};

export default function MyInputParent() {
  const inputRef = useRef<ChildRef>(null);

  const handleSubmit = () => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.scrollIntoView();
    }
  };

  return (
    <div>
      <h1>MyInput父组件</h1>
      <MyInput ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>编辑</button>
      <div style={{ height: '100vh' }}></div>
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

在这个文件中，我们创建了一个名为 MyInputParent 的父组件，并通过 useRef 获取对子组件 MyInput 的引用。通过点击按钮，父组件可以调用子组件暴露的方法来控制输入框的行为。

应用入口

最后，在 App.tsx 中引入 MyInputParent 组件，作为应用的入口。

App.tsx

// src/App.tsx
import MyInputParent from "./components/useImperativeHandle/MyInputParent";

function App() {
  return <MyInputParent />;
}

export default App;

解释与总结

`useImperativeHandle` 的作用

控制暴露给父组件的 API：useImperativeHandle 允许你自定义通过 ref 暴露给父组件的实例值。你可以选择性地暴露某些方法或属性，而隐藏其他内部实现细节。
避免过度暴露：通过 useImperativeHandle，你可以确保只暴露必要的接口，避免不必要的复杂性和潜在的安全问题。

示例中的具体实现

MyInput.tsx：我们定义了一个自定义输入框组件，并通过 useImperativeHandle 暴露了 focus 和 scrollIntoView 方法。
MyInputParent.tsx：父组件通过 useRef 获取对子组件的引用，并调用子组件暴露的方法来控制输入框的行为。

注意事项

性能考虑：useImperativeHandle 的依赖项数组（第二个参数）应该尽量保持稳定，以避免不必要的重新渲染。
封装性：虽然 useImperativeHandle 提供了强大的功能，但应谨慎使用，确保不会破坏组件的封装性。

希望这篇文章能帮助你更好地理解useImperativeHandle的使用方法，并为你的 React 项目带来更多的灵感和便利。如果你有任何问题或建议，欢迎留言交流！