在 react 中使用 socket.io 时，若在事件处理函数（如 `onclick`）内直接调用 `socket.on()`，会导致每次点击都新增一个监听器，造成多次响应（如重复弹窗）。正确做法是将监听逻辑移至 `useeffect` 中，并在组件卸载时通过 `socket.off()` 清理。
问题根源在于：playerJoin() 函数每次被点击都会执行 socket.on("game-found-status", ...)，而 Socket.IO 的 on() 方法不会自动覆盖旧监听器，而是不断叠加——即使组件未重渲染，监听器实例仍驻留在内存中。因此首次点击触发 1 次 alert，第二次触发 2 次，依此类推，形成典型的事件监听器泄漏（event listener leak）。
✅ 正确解法：将事件监听逻辑声明为组件生命周期的一部分，而非用户交互的副产物。使用 useEffect 并传入空依赖数组 []，确保监听器仅在组件挂载时注册、卸载时移除：
react-modernization
下载
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
useEffect(() => {
const handleGameFoundStatus = (gameFound: boolean) => {
if (gameFound) {
navigate("/player/lobby");
} else {
alert("No game found with this pin.");
}
};
socket.on("game-found-status", handleGameFoundStatus);
// 清理函数：组件卸载时移除监听器
return () => {
socket.off("game-found-status", handleGameFoundStatus);
};
}, [navigate]); // 注意：将 navigate 加入依赖数组更安全（虽其引用通常稳定）⚠️ 关键注意事项：
- 不要在事件处理器中注册监听器：onClick、onSubmit 等回调属于高频触发场景，绝不可在此处调用 socket.on()。
- 务必显式传递回调引用给 socket.off()：socket.off(event, callback) 才能精准移除；若只写 socket.off("game-found-status")，可能无法清除由闭包捕获的旧回调（尤其在 useCallback 或状态变化后）。
- 避免监听器内直接使用过期状态：示例中 navigate 是稳定的 Hook 返回值，但若需访问 displayName 或 pin，应通过 useRef 缓存最新值或在监听器内重新读取（推荐 useRef 避免闭包陷阱）。
- 服务端响应应幂等：确保 "player-join" 事件发送本身无副作用（如重复创建会话），前端监听器清理只是防御性措施，后端健壮性同样关键。
总结：Socket.IO 监听器本质是全局事件总线上的长期订阅，必须与 React 组件的生命周期对齐。useEffect + 清理函数是标准范式，既符合 React 的响应式设计哲学，也从根本上杜绝了重复触发、内存泄漏等常见问题。
