本文详解如何在 react 函数组件中正确注册和清理 google publisher tag（gpt）事件监听器，避免因 useeffect 未清理导致的回调重复执行问题，并提供可复用的防泄漏实践方案。
本文详解如何在 react 函数组件中正确注册和清理 google publisher tag（gpt）事件监听器，避免因 useeffect 未清理导致的回调重复执行问题，并提供可复用的防泄漏实践方案。
在使用 useEffect 注册全局事件（如 GPT 的 slotOnload）时，一个常见误区是：仅依赖空依赖数组 [] 并不自动保证监听器“只注册一次”——尤其当组件多次挂载/卸载（如严格模式下 useEffect 在开发环境会执行两次），或未显式移除监听器时，会导致监听器不断累积，最终引发回调被错误地多次触发（例如 slot-1 收到 partial 参数）。
根本原因在于：googletag.pubads().addEventListener() 是向全局广告服务实例添加监听器，而非绑定到某个 DOM 节点。每个
✅ 正确做法是：在 useEffect 的清理函数中，精准移除当前组件注册的监听器。关键点如下：
- 监听器必须可识别、可撤销：不能直接传匿名函数或每次 bind() 后丢失引用；需保留对绑定后函数的引用；
- 清理逻辑必须与注册逻辑配对：返回的清理函数应调用 removeEventListener，且参数（事件名 + 回调引用）必须完全一致；
- 避免全局副作用污染：确保每个组件只管理自己的监听生命周期。
以下是优化后的完整实现：
const { useEffect } = React;
// 通用回调：接收 display 和 event
const slotOnloadCallback = (display, event) => {
const { slot } = event;
console.log(`callback called for slot ${slot.getSlotElementId()} - display: ${display}`);
};
// create() 返回清理函数，确保监听器可撤销
const create = (id, display) => {
window.googletag = window.googletag || { cmd: [] };
// 定义广告位
window.googletag.cmd.push(() => {
const slot = window.googletag.defineSlot('/1234567/example', [728, 90], id);
slot.addService(window.googletag.pubads());
window.googletag.pubads().enableSingleRequest();
window.googletag.enableServices();
});
// 获取广告服务实例（关键：复用同一实例）
const ads = window.googletag.pubads();
// 创建唯一绑定回调（保留引用用于移除）
const boundCallback = slotOnloadCallback.bind(null, display);
// 注册监听器
ads.addEventListener('slotOnload', boundCallback);
// 触发广告展示
window.googletag.cmd.push(() => {
window.googletag.display(id);
});
// 返回清理函数：必须使用 *同一个 boundCallback 引用*
return () => {
ads.removeEventListener('slotOnload', boundCallback);
};
};
const Ad = ({ id, display }) => {
useEffect(() => {
console.log(`Ad ${id}: Mounted`);
// 调用 create 并返回清理函数，useEffect 自动执行它
return create(id, display);
}, []); // 空依赖数组确保仅在挂载时注册、卸载时清理
return <div id="{id}"></div>;
};
⚠️ 注意事项：
- 不要在 useEffect 内部重新定义 boundCallback：若在 effect 内 const fn = ...bind()，则每次 effect 执行（包括严格模式下的二次执行）都会生成新函数，导致旧监听器无法被清除；
- googletag.pubads() 必须在 enableServices() 之后获取，否则可能返回 undefined；
- 生产环境无需担心双执行（仅开发模式严格模式触发），但清理逻辑必须健壮，否则生产中路由切换、组件重渲染仍会内存泄漏；
- 若需支持动态更新 display，应将 display 加入 useEffect 依赖数组，并在清理后重新注册（注意避免竞态）。
总结：React 的 useEffect 不是“魔法开关”，它只是提供声明式副作用管理机制。对于全局事件监听，注册与注销必须成对出现，且回调引用必须保持一致。遵循“注册即返回清理函数”的模式，才能真正实现每个
