处理多个套接字

Question

我的ReactJS应用程序使用套接字。问题是我得到太多的套接字事件，导致我的应用程序在不到一分钟内渲染多次，所以我想知道什么是最好的方法来处理这个问题，因为这会导致我的应用程序在一段时间后冻结

这就是我在react app中调用socket事件的方式，我正在使用redux

useEffect(() => {

if (checkRole) {
dispatch(listEscalated());
}
dispatch(listSessions());
dispatch(joinSessionStatus());
dispatch(leaveSessionStatus());
dispatch(sessionOpen());
dispatch(sessionCloed());
dispatch(recieveSessionMsg());
dispatch(msgStatus());
dispatch(takenSession());
return () => {
socket.off("listAgentSessions");
socket.off("listEscalatedSessions");
socket.off("listSuperSessions");
socket.off("joinStatus");
socket.off("leaveStatus");
socket.off("sessionOpen");
socket.off("sessionClosed");
socket.off("receiveMessage");
socket.off("messageStatus");
socket.off("sessionTaken");
};
},[]);

Answer 1

您可以创建一个ref，初始值为空数组，并为每个套接字数据推送新数据到ref这样可以避免重新渲染，性能也会提高