时间戳

首页 > 解决方案 > 如何使用大量 Web 套接字消息更新 Material-ui 进度条，导致渲染经常发生

reactjs - 如何使用大量 Web 套接字消息更新 Material-ui 进度条，导致渲染经常发生

问题描述

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

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

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

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

标签： reactjswebsocketmaterial-uistaterender

解决方案

您可以尝试限制您的状态更新。使用lodash throttle的解决方案可能如下所示：

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} />
    );
};

推荐阅读