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>
);
组件A：
const dispatchEvent = (event) => {
window.dispatchEvent(new CustomEvent(this.props.eventName, { detail: event }));
};
// 在需要触发事件的地方调用 dispatchEvent
dispatchEvent({ data: 'some data' });
组件B：
componentDidMount() {
window.addEventListener(this.props.eventName, (e) => {
console.log('Event received:', e.detail); // 处理接收到的事件数据
});
}
componentWillUnmount() {
window.removeEventListener(this.props.eventName, (e) => {
console.log('Event received:', e.detail);
});
}
组件A通过dispatchEvent分发自定义事件，事件名称由父组件提供。组件B通过addEventListener监听事件，事件触发时，console.log(e.detail)打印事件数据。 componentDidMount和componentWillUnmount确保在组件挂载和卸载时添加和移除事件监听器，避免内存泄漏。 这种方法实现了组件A和组件B的解耦，无需状态管理库。
