用于干净 React 组件通信的事件驱动架构

您是否厌倦了 React 应用程序中无休止的 props 钻取和回调链？管理深层嵌套组件之间的状态和通信是否感觉就像与意大利面条代码搏斗？

事件驱动架构可以简化组件交互、降低复杂性并使您的应用程序更易于维护。在本文中，我将向您展示如何使用自定义 useEvent 挂钩来解耦组件并改善 React 应用程序之间的通信。

让我带您了解一下，让我们从

开始

---

问题：道具钻探和回调链

在现代应用程序开发中，管理组件之间的状态和通信很快就会变得很麻烦。在涉及 props 钻探（其中数据必须通过多层嵌套组件向下传递）和 回调链 的场景中尤其如此，这可能会导致逻辑混乱并使代码更难编写维护或调试。

这些挑战通常会创建紧密耦合的组件，降低灵活性，并增加试图跟踪数据如何流经应用程序的开发人员的认知负担。如果没有更好的方法，这种复杂性会显着减慢开发速度并导致脆弱的代码库。

传统流程：Props 向下，Callbacks 向上

在典型的 React 应用程序中，父组件将 props 传递给子组件，子组件通过触发回调与父组件进行通信。这对于浅层组件树来说效果很好，但随着层次结构的加深，事情开始变得混乱：

Props 钻取：数据必须通过多个级别的组件手动向下传递，即使只有最深层的组件需要它。

回调链：同样，子组件必须将事件处理程序沿树向上转发，创建紧密耦合且难以维护的结构。

一个常见问题：回调复杂性

以这个场景为例：

• 家长将道具传递给孩子A。
• 从那里，道具会深入到 GrandChildren A/B，并最终深入到 SubChildren N。
• 如果 SubChildren N 需要通知父级某个事件，它会触发回调 ，该回调通过每个中间组件 向上传播。

随着应用程序的增长，此设置变得更难以管理。中间组件通常只是充当中间人，转发 props 和回调，这使得代码变得臃肿并降低了可维护性。

为了解决道具钻探，我们经常求助于全局状态管理库（例如Zusstand）等解决方案来简化数据共享。但是如何管理回调呢？

这就是事件驱动方法可以改变游戏规则的地方。通过解耦组件并依靠事件来处理交互，我们可以显着简化回调管理。让我们探讨一下这种方法是如何运作的。

---

解决方案：采用事件驱动方法

事件驱动架构不是依赖直接回调在树上进行通信，而是事件驱动的架构解耦组件并集中通信。其工作原理如下：

事件调度

当SubChildren N触发事件（例如onMyEvent）时，它不会直接调用Parent中的回调。
相反，它调度由集中式事件处理程序处理的事件。

集中处理

事件处理程序侦听调度的事件并处理它。
它可以通知父级（或任何其他感兴趣的组件）或根据需要触发其他操作。

道具保持向下

道具仍然沿层次结构传递，确保组件接收到它们运行所需的数据。

这个问题可以通过 zustand、redux 等集中式状态管理工具来解决，但本文不会介绍。

---

执行

但是，我们如何实现这个架构？

使用事件钩子

让我们创建一个名为 useEvent 的自定义钩子，该钩子将负责处理事件订阅并返回一个调度函数来触发目标事件。

由于我使用的是 typescript，我需要扩展窗口事件接口才能创建自定义事件：

interface AppEvent<PayloadType = unknown> extends Event {
  detail: PayloadType;
}

export const useEvent = <PayloadType = unknown>(
  eventName: keyof CustomWindowEventMap,
  callback?: Dispatch<PayloadType> | VoidFunction
) => {
  ...
};

通过这样做，我们可以定义自定义事件映射并传递自定义参数：

interface AppEvent<PayloadType = unknown> extends Event {
  detail: PayloadType;
}

export interface CustomWindowEventMap extends WindowEventMap {
  /* Custom Event */
  onMyEvent: AppEvent<string>; // an event with a string payload
}

export const useEvent = <PayloadType = unknown>(
  eventName: keyof CustomWindowEventMap,
  callback?: Dispatch<PayloadType> | VoidFunction
) => {
  ...
};

现在我们定义了需要的接口，让我们看看最终的钩子代码

import { useCallback, useEffect, type Dispatch } from "react";

interface AppEvent<PayloadType = unknown> extends Event {
  detail: PayloadType;
}

export interface CustomWindowEventMap extends WindowEventMap {
  /* Custom Event */
  onMyEvent: AppEvent<string>;
}

export const useEvent = <PayloadType = unknown>(
  eventName: keyof CustomWindowEventMap,
  callback?: Dispatch<PayloadType> | VoidFunction
) => {
  useEffect(() => {
    if (!callback) {
      return;
    }

    const listener = ((event: AppEvent<PayloadType>) => {
      callback(event.detail); // Use `event.detail` for custom payloads
    }) as EventListener;

    window.addEventListener(eventName, listener);
    return () => {
      window.removeEventListener(eventName, listener);
    };
  }, [callback, eventName]);

  const dispatch = useCallback(
    (detail: PayloadType) => {
      const event = new CustomEvent(eventName, { detail });
      window.dispatchEvent(event);
    },
    [eventName]
  );

  // Return a function to dispatch the event
  return { dispatch };
};

useEvent 钩子是一个自定义的 React 钩子，用于订阅和分派自定义窗口事件。它允许您监听自定义事件并使用特定的负载触发它们。

我们在这里所做的非常简单，我们使用标准事件管理系统并对其进行扩展以适应我们的自定义事件。

参数：

• eventName (string): 要监听的事件的名称。
• 回调（可选）：触发事件时调用的函数，接收负载作为参数。

特征：

• 事件监听器：它监听指定的事件并使用事件的详细信息（自定义负载）调用提供的回调。
• 调度事件：该钩子提供了一个调度函数来使用自定义负载触发事件。

例子：

interface AppEvent<PayloadType = unknown> extends Event {
  detail: PayloadType;
}

export const useEvent = <PayloadType = unknown>(
  eventName: keyof CustomWindowEventMap,
  callback?: Dispatch<PayloadType> | VoidFunction
) => {
  ...
};

好吧，很酷，但是，怎么样

现实世界的例子？

查看此 StackBlitz（如果未加载，请在此处查看）

这个简单的示例展示了 useEvent 挂钩的用途，基本上，主体的按钮正在调度从侧边栏、页眉和页脚组件拦截的事件，并相应更新。

这让我们可以定义因果反应，而无需将回调传播到许多组件。

---

useEvent 的真实用例

以下是一些真实用例，其中 useEvent 挂钩可以简化 React 应用程序中的通信并解耦组件：

---

1. 通知系统

通知系统通常需要全球通信。

• 场景：

  • 当 API 调用成功时，需要在应用程序中显示“成功”通知。
  • 标题中的“通知徽章”等组件也需要更新。

• 解决方案：使用 useEvent 挂钩来调度带有通知详细信息的 onNotification 事件。像NotificationBanner和Header这样的组件可以监听这个事件并独立更新。

2. 主题切换

当用户切换主题（例如，亮/暗模式）时，多个组件可能需要响应。

• 场景：

  • ThemeToggle 组件调度自定义 onThemeChange 事件。
  • 侧边栏和标题等组件侦听此事件并相应地更新其样式。

• 好处：不需要在整个组件树上通过 props 传递主题状态或回调函数。

3. 全局按键绑定

实现全局快捷键，例如按“Ctrl S”保存草稿或“Escape”关闭模式。

• 场景：
  • 全局 keydown 监听器调度 onShortcutPressed 事件以及按下的按键详细信息。
  • 模态组件或其他 UI 元素响应特定的快捷键，而不依赖父组件转发按键事件。

4. 实时更新

聊天应用程序或实时仪表板等应用程序需要多个组件来对实时更新做出反应。

• 场景：
  • 当新数据到达时，WebSocket 连接会调度 onNewMessage 或 onDataUpdate 事件。
  • 聊天窗口、通知和未读消息计数器等组件可以独立处理更新。

5. 跨组件的表单验证

对于具有多个部分的复杂表单，可以集中验证事件。

• 场景：
  • 当用户填写字段时，表单组件调度 onFormValidate 事件。
  • 摘要组件侦听这些事件以显示验证错误，而不与表单逻辑紧密耦合。

6. 分析跟踪

跟踪用户交互（例如按钮点击、导航事件）并将其发送到分析服务。

• 场景：
  • 调度带有相关详细信息的 onUserInteraction 事件（例如，单击的按钮的标签）。
  • 中央分析处理程序侦听这些事件并将它们发送到分析 API。

7. 协作工具

对于共享白板或文档编辑器等协作工具，事件可以管理多用户交互。

• 场景：
  • 每当用户绘制、键入或移动对象时调度 onUserAction 事件。
  • 其他客户端和 UI 组件监听这些事件以实时反映变化。

通过在这些场景中利用 useEvent 挂钩，您可以创建模块化、可维护且可扩展的应用程序，而无需依赖深度嵌套的 props 或回调链。

---

结论

事件可以通过降低复杂性和提高模块化来改变您构建 React 应用程序的方式。从小事做起——确定应用程序中的一些组件，这些组件将受益于解耦通信并实现 useEvent 挂钩。

通过这种方法，您不仅可以简化代码，还可以使其在未来更易于维护和扩展。

为什么使用事件？
当您需要组件对应用程序中其他地方发生的事情做出反应，而不引入不必要的依赖项或复杂的回调链时，事件就会发挥作用。这种方法减少了认知负担并避免了紧密耦合组件的陷阱。

我的推荐
使用事件进行组件间通信——当一个组件需要通知其他组件有关操作或状态更改时，无论它们在组件树中的位置如何。
避免使用事件进行组件内通信，特别是对于密切相关或直接连接的组件。对于这些场景，依赖 React 的内置机制，如 props、state 或 context。

平衡的方法
虽然事件的力量很强大，但过度使用它们可能会导致混乱。明智地使用它们来简化松散连接组件之间的通信，但不要让它们取代 React 管理本地交互的标准工具。

以上是用于干净 React 组件通信的事件驱动架构的详细内容。更多信息请关注PHP中文网其他相关文章！