React 中正确管理 Socket.IO 事件监听器的最佳实践

霞舞 2026-01-14 00:00:00 次阅读

在 react 中为 socket.io 事件重复绑定 `socket.on()` 会导致监听器不断累积，引发多次触发（如多次弹窗），需结合 `useeffect` 和清理函数确保监听器只注册一次且及时解绑。

问题根源在于：每次调用 playerJoin() 时都执行了 socket.on("game-found-status", ...)，而 Socket.IO 的 on() 方法不会自动覆盖已有监听器，而是叠加注册——第一次点击注册 1 个，第二次点击注册第 2 个，以此类推。因此，当服务端发出一次 "game-found-status" 事件时，所有已注册的监听器都会同步执行，导致 alert() 被反复调用（1 次、2 次、3 次……），尽管 playerJoin() 函数本身只执行了一次。

✅ 正确做法是：将事件监听逻辑从事件处理函数中移出，改用 useEffect 进行一次性声明式绑定，并在组件卸载时通过返回的清理函数调用 socket.off() 解绑。

以下是修复后的完整代码示例：

function Home() {
  const [input, setInput] = useState({
    displayName: "",
    pin: "",
  });
  const { displayName, pin } = input;
  const navigate = useNavigate();
  const socket = /* your initialized socket instance */;

  // ✅ 使用 useEffect 管理 socket 监听器生命周期
  useEffect(() => {
    const handleGameFoundStatus = (gameFound) => {
      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, socket]); // 依赖项包含 socket 和 navigate，确保稳定性

  const playerJoin = () => {
    // ❌ 不再在此处绑定监听器
    socket.emit("player-join", displayName, pin);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setInput((prev) => ({ ...prev, [name]: value }));
  };

  return (
    
      Join a Game
      
        Display Name
        
        Game Pin
        
        
        
          Click here to host a game
        
      
    
  );
}