如何解决在删除另一个组件中的所有侦听器之后,为什么socket.io无法在React组件上进一步工作?
经过数周的调试并不得不执行一个可怕的解决方法才能使我的React应用程序正常工作,我才发现了问题,作为React的初学者,这让我感到困惑,所以我发布此问题以听取您的建议。
我有一个React应用程序,或者说一个Ionic react应用程序(但它与普通的React Web应用程序实际上是相同的),在这里我使用着名的socket.io库与后端通信并实时接收消息时间。
为简单起见,这是我的代码的构建方式:
import React,{ useEffect,useState } from 'react';
import socketIOClient from 'socket.io-client';
// bunch of other imports ....
const serverHost = config.localUrl;
const socket = socketIOClient(serverHost);
const App: React.FC = () => {
const [state1,setState1] = useState([]);
const [state2,setState2] = useState([]);
useEffect(() => {
socket.on('connect_error',() => {
console.log("connection error .. please make sure the server is running");
// socket.close();
});
return () => {
console.log("deconnecting the socket... ");
socket.close();
}
},[])
useEffect( () => {
socket.emit('init',"initialize me");
socket.on('onInit',(configs: any) => {
setState1(configs);
});
},[])
const reset = () => {
socket.removeAllListeners(); // the focus is on this line here.
state1.forEach( (s: any) => {
s.checked = false;
s.realTimeValue = "";
})
setState1([]);
}
return (
<IonApp>
<IonToolbar color="primary">
<IonTitle >Test</IonTitle>
</IonToolbar>
<IonContent>
<Component1
socket={socket}
reset={reset}
/>
<IonList>
{state1.map((s: any,idx: number) =>
<Component2 key={s.name}
s={s}
socket={socket}
/>)
}
</IonList>
</IonContent>
<CustomComponent socket={socket} />
</IonApp>
);
};
export default App;
如您所见,我的应用程序很简单。我传递了套接字对象以侦听子组件中的事件,这种情况一直很好,直到有一天我注意到如果用户在UI中删除了Component2之一,那么我将收到一个警告,指出socket.io已收到这是一个事件,但是组件已卸载,这将导致内存泄漏。这是反应中的一个著名警告,这是警告:
Can't perform a React state update on an unmounted component. This is a no-op,but it indicates a memory leak in your application. To fix,cancel all subscriptions and clean up listeners.
在谷歌搜索之后,我发现socket.io有一个内置函数可以执行此操作,这就是我在reset函数中调用的socket.removeAllListeners()
。在这里变得很有趣,这很好用,现在用户可以安全删除了。但是,CustomComponent(应用程序中的最后一个组件)中的socket.on
调用不再起作用。如果我在重置功能中注释了socket.removeAllListeners()
行,那么CustomComponent中的socket.on
调用将再次开始侦听和接收消息。
令人惊讶的是,这不仅不适用于我应用程序中的最后一个组件CustomComponent
。但是,它对于其他组件也能正常工作!如您在代码中所看到的,我将reset
函数作为对Component1
的支持,因此它与CustomComponent
无关。
有人知道为什么它不起作用以及如何解决?
注意
我实现的解决方法是将CustomComponent中的socket.on
函数移到useEffect内,以便在ComponentDidMount和ComponentDidUpdate发生时始终会触发该函数。这里的问题是socket.on会触发多次。因此,如果我收到来自服务器的消息,那么我会在浏览器中看到该函数连续被调用了5次。
解决方法
socket.removeAllListeners()
将从套接字中删除所有侦听器,包括那些仍由已安装和侦听的组件添加的侦听器。
组件在安装时应调用socket.on
,在卸载时应调用socket.off
。这可以通过使用useEffect来实现:
const [configs,setConfigs] useState([]);
useEffect(() => {
const onInit = configs => setConfigs(configs);
socket.on('onInit',onInit);
socket.emit('init',"initialize me");
// return a function that unsubscribes the handler from the socket
// you have to pass the handler which you passed to socket.on before to only remove that handler
return () => socket.off('onInit',onInit);
},[]);
经验法则是,订阅某些东西作为安装它的副作用的组件在卸载时也必须取消订阅。它永远不能只做两者之一,而只能退订它所订阅的内容。当组件仅订阅特定事件时,调用socket.removeAllListeners()
很容易出错。它将中断其他任何组件的订阅。
如果组件没有打开套接字,则不应关闭套接字,并且不应订阅也不取消订阅的信号。不能将副作用归于一处会使您头疼。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。