React路由组件引入SocketIO后NAV组件监听失效问题

我有一个名为NAV的静态组件，负责通过socket.on监听并存储通知信息。当路由组件未引入SocketIO时，该监听正常工作；但当路由内的组件使用SocketIO后，NAV组件中的socket监听便停止工作，必须重复NAV中的socket.on代码才能恢复接收信息，这属于不良编码实践。目前已有5个不同路由的组件出现此问题，我尝试过用一个组件包裹所有路由组件来管理SocketIO信息，但未成功。

NAV组件本应不受路由影响持续监听SocketIO，但实际并未生效。SocketIO实例已抽离到单独文件供各组件访问。

相关代码 #

服务端SocketIO代码 #

socket.on("received event", async (id, productID) => {
  if (id || productID) {
    let product;

    if (productID !== undefined)
      product = await Product.findById(productID);

    const user = getUser(id ? id : product.owner);

    if (user.length > 0)
      user.map((user) => io.to(user.socketId).emit("received event"));
  }
});

NAV组件代码 #

import { socket } from "../api";

function Nav() {
   const dispatch = useDispatch();

   const searchNotifications = useCallback(async () => {
    const briefNotifications = await getNotifications(cookies.get("id"));

    const currentNotification = [];
    let count = 0;

    for (let i = 0; i < 3; i++) {
      if (briefNotifications[i] !== undefined)
        currentNotification.push(briefNotifications[i]);
    }
    for (let i = 0; i < briefNotifications.length; i++) {
      if (!briefNotifications[i].view) count += 1;
    }

    dispatch(set(count));
    dispatch(changeNotifications(currentNotification));
  }, [dispatch]);

  useEffect(() => {
    socket.on("received event", async () => { // 进入Post路由后此监听失效
      await searchNotifications();
    });

    return () => socket.off();
  });

   return <Content/>
}

主App组件代码 #

function App() {
  return (
    <LoadingZone>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/report" element={<PrivateRoute><Report /></PrivateRoute>}/>
        <Route path="/messages" element={<PrivateRoute><Messages /></PrivateRoute>}/>
        <Route path="/notifications" element={<PrivateRoute><Notifications /></PrivateRoute>}/>
        <Route path="/help/*" element={<Help />} />
        <Route path="/post/information/*" element={<Post />} /> {/* NAV的SocketIO对此无影响 */}
      </Routes>
      <Footer />
      <PopupWindow/>
    </LoadingZone>
  );
}

export default App;

Post组件代码 #

function Post() {
   ... // 与问题无关的代码

   return <Content/>
}

问题根源与修复方案 #

问题根源 #

1. 全局监听器被误移除：NAV组件的useEffect清理函数调用了socket.off()，该方法会移除所有SocketIO事件的监听器，而不仅仅是NAV添加的那个。当其他路由组件使用SocketIO并执行类似清理逻辑时，会连带清除NAV的监听。
2. 无依赖数组导致重复绑定/清理：useEffect未设置依赖数组，组件每次渲染都会重新绑定监听器并执行清理，反复移除/添加监听器，引发不稳定问题。

修复步骤 #

1. 精准移除单个监听器

修改NAV组件的useEffect，保存监听器函数的引用，清理时只移除当前组件添加的监听器：

useEffect(() => {
  // 单独定义监听器函数，保存引用
  const handleReceivedEvent = async () => {
    await searchNotifications();
  };

  socket.on("received event", handleReceivedEvent);

  // 仅移除当前组件添加的监听器
  return () => socket.off("received event", handleReceivedEvent);
}, [searchNotifications]); // 添加依赖数组，仅当searchNotifications变化时重新绑定

2. 确保SocketIO实例为单例

确认抽离的SocketIO实例是全局唯一的单例，避免多个组件创建独立连接：

// ../api.js
import { io } from "socket.io-client";

// 单例模式创建socket实例
export const socket = io(process.env.REACT_APP_API_URL);

3. 排查其他路由组件的SocketIO使用

检查出现问题的5个路由组件，若它们调用了socket.off("received event")或socket.off()（无参数），统一改成精准移除单个监听器的方式，避免误清除全局监听器。

4. 可选：封装全局SocketIO监听Hook

为了统一管理监听逻辑，避免重复代码，可以封装一个自定义Hook：

// hooks/useSocketListener.js
import { useEffect } from "react";
import { socket } from "../api";

export const useSocketListener = (eventName, handler) => {
  useEffect(() => {
    socket.on(eventName, handler);
    return () => socket.off(eventName, handler);
  }, [eventName, handler]);
};

在NAV组件中使用：

import { useSocketListener } from "./hooks/useSocketListener";

function Nav() {
  // ... 其他代码

  useSocketListener("received event", async () => {
    await searchNotifications();
  });

  // ... 渲染内容
}

内容的提问来源于stack exchange，提问作者Melvin