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

Question

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

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

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

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

Answer 1

您可以改为尝试限制状态更新。使用 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} />
    );
};

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

How do I make material-ui progress bar update with large number of web socket messages causing render to happen often

state

render

websocket

reactjs

material-ui