使用 React 中的自定义事件管理应用程序状态：一种简单而强大的方法

在构建 React 应用时，跨组件管理状态可能颇具挑战性。虽然 Context API、Redux 或 Zustand 等解决方案很受欢迎，但我们可以利用一个更简单的浏览器原生功能：自定义事件。

什么是自定义事件？

自定义事件是原生浏览器事件 API 的一部分，它允许您在整个应用程序中创建和调度自定义事件。它们提供了一种轻量级、解耦的组件间通信方式，无需 prop 钻取或复杂的状态管理库。

为什么要使用自定义事件？

本机浏览器 API - 无需额外的依赖项。
解耦通信——组件无需直接关系即可进行通信。
实施简单——易于设置和维护。
性能——全局状态管理的轻量级替代方案。
类型安全——可以使用 TypeScript 进行完全类型化。

实现示例

让我们看一个使用自定义事件实现模态系统的实际例子。

1. 定义您的自定义事件
首先，创建一个接口来定义您的自定义事件：

export interface CustomEvents {
  'modal-event': {
    action: 'open' | 'close'
  }
}

2. 创建触发函数
创建一个辅助函数来调度自定义事件：

export const triggerCustomEvent = <EventName extends keyof CustomEvents>(
  eventName: EventName,
  data: CustomEvents[EventName]
) => {
  const event = new CustomEvent(eventName, { detail: data })
  document.dispatchEvent(event)
}

3.创建自定义钩子
创建一个钩子来监听自定义事件：

export function useEventListener<T extends keyof CustomEvents>(
  eventName: T,
  handler: (detail: CustomEvents[T]) => void
) {
  useEffect(() => {
    const eventHandler = (event: CustomEvent<CustomEvents[T]>) => {
      handler(event.detail)
    }

    document.addEventListener(eventName, eventHandler as EventListener)
    return () => {
      document.removeEventListener(eventName, eventHandler as EventListener)
    }
  }, [eventName, handler])
}

使用示例

以下是使用自定义事件实现模态系统的方法：

触发模态框：

const handleOpenModal = () => {
  triggerCustomEvent('modal-event', { action: 'open' })
}

模态组件：

export const FeedbackModal: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false)

  useEventListener('modal-event', ({ action }) => {
    switch (action) {
      case 'open':
        setIsOpen(true)
        break
      case 'close':
        setIsOpen(false)
        break
    }
  })

现实世界的益处

让我们研究一个自定义事件发挥作用的实际场景。在我们的示例应用程序中，我们有三个独立的组件（页眉、内容和页脚），它们都需要触发相同的模态框：

export default function Home() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
      <FeedbackModal />
    </div>
  )
}

而不是：

将状态提升到共同的父级
使用 Context API
实现状态管理库
支柱钻井

我们只是：

定义我们的自定义事件
从任何地方触发
在需要的地方聆听

最佳实践

类型安全：始终定义自定义事件接口
事件命名：使用清晰、描述性的事件名称
清理：始终在 useEffect 清理过程中删除事件监听器
有效载荷结构：保持事件有效载荷简单且定义明确

何时使用自定义事件

自定义事件在以下情况下特别有用：

组件需要跨应用程序的不同部分进行通信
你想避免钻螺旋桨
您需要一个轻量级的全局状态管理替代方案
组件需要对没有直接关系的操作做出反应

何时不使用自定义事件

在以下情况下考虑替代方案：

你需要持久状态
您需要跨多个选项卡进行状态同步
您需要处理复杂的状态逻辑
您需要追踪状态历史记录

结论

自定义事件提供了一种简单而强大的方法来处理 React 应用程序中的组件通信。虽然它们可能无法取代复杂应用程序的全状态管理库，但它们为许多常见场景提供了轻量级的解决方案。

这种方法的优点在于其简单性以及对浏览器原生功能的利用。它提醒我们，有时最好的解决方案就是平台内置的解决方案。

此实现演示了如何利用浏览器 API 创建简洁、可维护的代码，而无需不必要的依赖。完整的示例代码可在提供的存储库中找到，其中展示了自定义事件如何优雅地解决跨组件通信难题。

仓库：https://github.com/AdrianKnapp/custom-events
试用：https://custom-events-iota.vercel.app/

文章来源：https://dev.to/adrianknapp/managing-application-state-with-custom-events-in-react-a-simple-yet-powerful-approach-ngd