用 ref 操作 DOM 的艺术：使用 useImperativeHandle 公开组件 API

2023-11-22 00:29:45

如何使用 ref 操作 DOM？（八）useImperativeHandle 给自己的组件公开特定的 API

在 React 的世界中，我们经常需要与 DOM 元素交互，而 ref 是实现这一目标的强大工具。它允许我们访问 DOM 节点，从而我们可以直接对其进行操作或调用其方法。在本文中，我们将深入探究 useImperativeHandle 的魅力，它为我们提供了在组件之间公开特定 API 的便捷途径。

useImperativeHandle 简介

useImperativeHandle 是一个 React Hook，它允许我们向父组件公开组件的特定 API。换句话说，它为组件提供了一种与父组件交互并公开其内部方法或状态的机制。这在构建可重用且可组合的组件时非常有用，尤其是在我们需要公开特定功能或与外部库交互时。

用法

要使用 useImperativeHandle，我们需要遵循以下步骤：

创建 ref 对象： 在父组件中，使用 React.createRef() 创建一个 ref 对象。
将 ref 传递给子组件： 在子组件中，使用 React.forwardRef() 将 ref 对象作为第二个参数传递给函数组件。
使用 useImperativeHandle： 在子组件中，使用 useImperativeHandle(ref, () => ({ ...api }), [dependencies]) 来公开 API。其中，ref 是父组件中创建的 ref 对象，() => ({ ...api }) 是返回一个包含要公开的方法或状态的对象的函数。

实例

让我们通过一个示例来说明如何使用 useImperativeHandle：

import React, { useEffect, useRef, useState } from 'react';

function MyComponent(props, ref) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 当组件挂载时，将 ref 对象与组件实例链接
    if (ref) {
      ref.current = {
        increment: () => setCount(prevCount => prevCount + 1),
        getCount: () => count,
      };
    }
  }, [ref]);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

// 将 MyComponent 包装在 forwardRef 中，以便 ref 可以被父组件访问
const ForwardedMyComponent = React.forwardRef(MyComponent);

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

  useEffect(() => {
    // 访问子组件公开的 API
    if (componentRef.current) {
      componentRef.current.increment();
      console.log(componentRef.current.getCount()); // 输出：1
    }
  }, [componentRef]);

  return (
    <ForwardedMyComponent ref={componentRef} />
  );
}

在这个示例中，ForwardedMyComponent 是一个包装了 MyComponent 的 forwardRef 组件。通过将 componentRef 作为第二个参数传递给 MyComponent，我们可以访问它公开的 API，包括 increment() 和 getCount() 方法。这使我们能够从父组件控制子组件的内部状态。

优点

useImperativeHandle 提供了以下优点：