使用React钩子+ WebSockets的正确方法
使用React钩子+ WebSockets的正确方法
提问于 2020-02-10 22:55:28
我需要连接到WebSockets服务器并记录它的消息。有了React类组件，我会把这个逻辑放在componentDidMount生命周期钩子中，然后愉快地继续前进，但我不确定如何用钩子正确地实现它。
这是我的第一次尝试。
import React, {useEffect} from 'react';
export default function AppWs() {
useEffect(() => {
let ws = new WebSocket('wss://ws.kraken.com/');
ws.onopen = () => console.log('ws opened');
ws.onclose = () => console.log('ws closed');
ws.onmessage = e => {
const message = JSON.parse(e.data);
console.log('e', message);
};
return () => {
ws.close();
}
}, []);
return (
<div>hooks + ws</div>
)
}我向useEffect添加了连接和日志逻辑，提供了具有依赖关系的空数组，一切都运行得很好。直到我需要添加pause状态来暂停日志记录。
export default function AppWs() {
const [isPaused, setPause] = useState(false);
useEffect(() => {
let ws = new WebSocket('wss://ws.kraken.com/');
ws.onopen = () => console.log('ws opened');
ws.onclose = () => console.log('ws closed');
ws.onmessage = e => {
if (isPaused) return;
const message = JSON.parse(e.data);
console.log('e', message);
};
return () => {
ws.close();
}
}, []);
return (
<div>
<button onClick={() => setPause(!isPaused)}>{isPaused ? 'Resume' : 'Pause'}</button>
</div>
)
}ESLint开始对我大喊大叫，说我应该把isPaused状态作为依赖项添加到useEffect中。
好了，好了，完成了。
但我注意到每次单击该按钮后都会重新连接到WS服务器。这显然不是我想要的。
我的下一个迭代是使用两个useEffect：一个用于连接，另一个用于消息处理。
export default function AppWs() {
const [isPaused, setPause] = useState(false);
const [ws, setWs] = useState(null);
useEffect(() => {
const wsClient = new WebSocket('wss://ws.kraken.com/');
wsClient.onopen = () => {
console.log('ws opened');
setWs(wsClient);
};
wsClient.onclose = () => console.log('ws closed');
return () => {
wsClient.close();
}
}, []);
useEffect(() => {
if (!ws) return;
ws.onmessage = e => {
if (isPaused) return;
const message = JSON.parse(e.data);
console.log('e', message);
};
}, [isPaused, ws]);
return (
<div>
<button onClick={() => setPause(!isPaused)}>{isPaused ? 'Resume' : 'Pause'}</button>
</div>
)
}这工作如预期，但我有一种感觉，我错过了一些东西，这个任务可以更容易地解决，一个useEffect。请帮助重构代码，让我相信我以正确的方式使用了React钩子。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-11 10:30:43
因为你只需要设置一次web socket，所以我认为更好的方法是使用ref而不是state：
useEffect的顺序很重要。
正如乔治在注释中所建议的那样，在第一个useEffect中，ws.current被保存到一个变量中，以确保当调用close时，它引用相同的实例。
export default function AppWs() {
const [isPaused, setPause] = useState(false);
const ws = useRef(null);
useEffect(() => {
ws.current = new WebSocket("wss://ws.kraken.com/");
ws.current.onopen = () => console.log("ws opened");
ws.current.onclose = () => console.log("ws closed");
const wsCurrent = ws.current;
return () => {
wsCurrent.close();
};
}, []);
useEffect(() => {
if (!ws.current) return;
ws.current.onmessage = e => {
if (isPaused) return;
const message = JSON.parse(e.data);
console.log("e", message);
};
}, [isPaused]);
return (
<div>
<button onClick={() => setPause(!isPaused)}>
{isPaused ? "Resume" : "Pause"}
</button>
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60152922
复制相关文章
相似问题
腾讯云开发者
