React组件间通信：如何不依赖props、context及状态管理库实现解耦？

React组件通信的解耦设计：无需props、context或状态管理库

在React应用开发中，组件间通信至关重要。虽然props、context和状态管理库（如Zustand、MobX）是常用的方案，但有时我们需要更解耦的异步通信方式，避免直接依赖状态管理库。本文介绍一种基于自定义事件监听的解耦设计，实现组件A触发事件，组件B监听并响应，无需React默认通信方式和状态管理库。

问题：如何在不使用React默认组件通信方式和状态管理库的情况下，实现组件A触发事件，组件B监听并处理该事件？

解决方案：利用JavaScript内置的CustomEvent对象。CustomEvent允许创建自定义事件并分发到DOM。组件A创建并分发CustomEvent实例，组件B使用addEventListener监听该事件。

为了保证事件唯一性，我们使用随机生成的事件名称。父组件生成唯一事件名称，并将其作为属性传递给组件A和组件B。

实现细节：

父组件：

const eventName = `event-${Math.random()}`;return (  <div>    <CompA eventName={eventName} />    <CompB eventName={eventName} />  </div>);

登录后复制