React组件通信的灵活选择：事件监听机制
在React开发中，组件间通信通常依赖Props或状态管理库(如Redux、Zustand)。然而，为了追求更解耦的架构，我们可以考虑使用事件监听机制，避免直接依赖状态管理库或Props传递数据。本文将介绍如何利用原生CustomEvent对象实现React组件间的事件驱动通信，让组件A触发事件，组件B监听并响应。
这种方法避免了直接使用React默认的组件通信方式，也无需引入额外状态管理库，实现更灵活的组件间交互。
核心思路是：父组件生成一个唯一的事件名称，传递给组件A和组件B；组件A触发事件，组件B监听并处理事件数据。
实现步骤及示例代码：
首先，父组件创建一个唯一的事件名称(例如，使用随机数保证唯一性)：
const eventName = `event-${Math.random()}`;
return (
组件A触发事件：
const dispatchEvent = (event) => {
window.dispatchEvent(event);
};
const handleClick = () => {
dispatchEvent(new CustomEvent(props.eventName));
};
return (
);
组件B监听并处理事件：
useEffect(() => {
const handleEvent = (e) => {
console.log('事件已触发:', e);
// 处理事件数据
};
window.addEventListener(props.eventName, handleEvent);
return () => {
window.removeEventListener(props.eventName, handleEvent);
};
}, [props.eventName]);
return 监听事件;
这段代码展示了如何利用CustomEvent实现组件A和B的通信，解耦了组件间的依赖关系。 需要注意的是，这里使用window作为事件监听的载体，在大型应用中，可能需要考虑其全局性带来的潜在影响，并根据实际项目需求选择更合适的事件分发机制，例如使用Event Emitter库。 这提供了一种更灵活、更解耦的组件间通信方式，适合在某些特定场景下使用。
