如何使用大量的web套接字消息更新材质ui进度条，导致渲染经常发生

Question

我正在使用React和材料ui。我有一个网络套接字，每分钟发送9000条消息。

在我的react应用程序中，我有一个材料ui确定进度条，它从网络套接字消息中获取其值。进度条不能准确反映来自web套接字消息的值。

我将web套接字消息存储在状态中，因此UI经常重新呈现。

如何避免这个问题？我无法限制消息，因为我需要保存和处理所有消息。提前谢谢。

Answer 1

您可以尝试限制状态更新。使用lodash节流阀的解决方案可能看起来像这样：

const TOTAL = 100000;
const ProgressBar = ({socket}) => {
const cache = useRef([]);
const [messages, onMessage] = useState([]);
useEffect(() => {
const update = throttle(() => onMessage(cache.current), 500);
const handleMessage = message => {
cache.current = [...cache.current, message];
update();
}
socket.on('message', handleMessage);
return () => {
update.cancel();
socket.off('message', handleMessage);
}
}, []);
return (
<LinearProgress variant="determinate" value={messages.length / TOTAL} />
);
};