与 useEventEmitter 协同使用 useImperativeHandle**

2023-09-11 15:58:59

引言

在复杂的用户界面中，组件之间经常需要进行通信，以共享数据和事件。React 为此提供了各种工具和模式，包括 useImperativeHandle 和 useEventEmitter 钩子。这些钩子通过允许组件暴露和订阅事件来促进组件之间的松散耦合和可重用性。

useImperativeHandle

useImperativeHandle 钩子允许组件通过 ref 暴露其公开方法。这在需要使用父组件的引用时特别有用，例如当子组件需要触发父组件中的操作时。

import { useImperativeHandle, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const handleClick = () => {
    // 调用父组件的公开方法
    ref.current.handleButtonClick();
  };

  useImperativeHandle(ref, () => ({
    handleClick,
  }));

  return <button onClick={handleClick}>点击我</button>;
});

useEventEmitter

useEventEmitter 钩子允许组件创建一个自定义事件发射器，其他组件可以订阅它以接收事件。这在组件需要跨层级通信时非常有用，例如当子组件需要通知祖先组件时。

import { useEventEmitter } from 'react';

const ParentComponent = () => {
  const emitter = useEventEmitter();

  // 订阅子组件发出的事件
  emitter.subscribe('buttonClicked', () => {
    console.log('按钮被点击了！');
  });

  return <ChildComponent emitter={emitter} />;
};

共享事件通知

通过结合使用 useImperativeHandle 和 useEventEmitter，我们可以实现共享事件通知。这涉及在子组件中使用 useImperativeHandle 暴露事件处理程序，而在父组件中使用 useEventEmitter 订阅该事件。

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  const emitter = props.emitter;

  useImperativeHandle(ref, () => ({
    handleClick: () => {
      // 使用事件发射器发出事件
      emitter.emit('buttonClicked');
    },
  }));

  return <button onClick={ref.current.handleClick}>点击我</button>;
});

// 父组件
const ParentComponent = () => {
  const emitter = useEventEmitter();

  // 订阅子组件发出的事件
  emitter.subscribe('buttonClicked', () => {
    console.log('按钮被点击了！');
  });

  return <ChildComponent emitter={emitter} />;
};