React組件通信的靈活選擇：事件監聽機制
在React開發中，組件間通信通常依賴Props或狀態管理庫(如redux、Zustand)。然而，為了追求更解耦的架構，我們可以考慮使用事件監聽機制，避免直接依賴狀態管理庫或Props傳遞數據。本文將介紹如何利用原生CustomEvent對象實現React組件間的事件驅動通信，讓組件A觸發事件，組件B監聽并響應。
這種方法避免了直接使用React默認的組件通信方式，也無需引入額外狀態管理庫，實現更靈活的組件間交互。
核心思路是：父組件生成一個唯一的事件名稱，傳遞給組件A和組件B；組件A觸發事件，組件B監聽并處理事件數據。
實現步驟及示例代碼：
首先，父組件創建一個唯一的事件名稱(例如，使用隨機數保證唯一性)：
const eventName = `event-${Math.random()}`; return ( <div> <CompA eventName={eventName} /> <CompB eventName={eventName} /> </div> );
組件A觸發事件：
const dispatchEvent = (event) => { window.dispatchEvent(event); }; const handleClick = () => { dispatchEvent(new CustomEvent(props.eventName)); }; return ( <button onClick={handleClick}>觸發事件</button> );
組件B監聽并處理事件：
useEffect(() => { const handleEvent = (e) => { console.log('事件已觸發:', e); // 處理事件數據 }; window.addEventListener(props.eventName, handleEvent); return () => { window.removeEventListener(props.eventName, handleEvent); }; }, [props.eventName]); return <div>監聽事件</div>;
這段代碼展示了如何利用CustomEvent實現組件A和B的通信，解耦了組件間的依賴關系。 需要注意的是，這里使用window作為事件監聽的載體，在大型應用中，可能需要考慮其全局性帶來的潛在影響，并根據實際項目需求選擇更合適的事件分發機制，例如使用Event Emitter庫。 這提供了一種更靈活、更解耦的組件間通信方式，適合在某些特定場景下使用。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
