Reactjs 如何使用大量web套接字消息使材质ui进度栏更新，从而经常发生渲染

我使用的是React和materialui。我有一个web套接字，每分钟发送9000条消息

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

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

---

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

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

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

const总计=100000；
const ProgressBar=（{socket}）=>{
const cache=useRef（[]）；
const[messages，onMessage]=useState（[]）；
useffect（（）=>{
constupdate=throttle（（）=>onMessage（cache.current），500）；
const handleMessage=message=>{
cache.current=[…cache.current，message]；
更新（）；
}
socket.on（'message'，handleMessage）；
return（）=>{
update.cancel（）；
socket.off（'message'，handleMessage）；
}
}, []);
返回(
);
};

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

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

const总计=100000；
const ProgressBar=（{socket}）=>{
const cache=useRef（[]）；
const[messages，onMessage]=useState（[]）；
useffect（（）=>{
constupdate=throttle（（）=>onMessage（cache.current），500）；
const handleMessage=message=>{
cache.current=[…cache.current，message]；
更新（）；
}
socket.on（'message'，handleMessage）；
return（）=>{
update.cancel（）；
socket.off（'message'，handleMessage）；
}
}, []);
返回(
);
};

如果无法阻止消息，可以阻止状态更新。请分享您目前拥有的相关代码。或者，您可以批量发送消息，而不是单独发送。每秒150条消息似乎非常多。您将如何限制状态更新？也许您的意思是限制调用setState（）的方法。那可能会有帮助，谢谢。我在回答中概述了一个解决方案。它可能需要根据您的具体问题进行调整，但它基本上涉及将消息存储在

ref

中，并限制使用

ref

中的当前消息调用

setState（）

的函数。如果无法限制消息，则可以改为限制状态更新。请分享您目前拥有的相关代码。或者，您可以批量发送消息，而不是单独发送。每秒150条消息似乎非常多。您将如何限制状态更新？也许您的意思是限制调用setState（）的方法。那可能会有帮助，谢谢。我在回答中概述了一个解决方案。它可能需要根据您的具体问题进行调整，但基本上需要将消息存储在

ref

中，并限制使用

ref

中的当前消息调用

setState（）

的函数。我最终存储了所有数据并使用setInterval（）每100毫秒设置一次状态。我最后存储了所有数据，并使用setInterval（）每100毫秒设置一次状态。