reactjs中的实时图表

问题描述

import React,{ useState,useEffect } from 'react';
import './App.css';
import { Line,LineChart,XAxis,YAxis } from 'recharts';

import socketIOClient from 'socket.io-client';
const ENDPOINT = 'http://192.168.1.45:4001';
function App() {
  const [data,updateData] = useState([]);
  const socket = socketIOClient(ENDPOINT,{
    transports: ['websocket','polling'],});
  useEffect(() => {
    socket.on('a',(a) => {
      updateData((currentData) => {
        const ab = [...currentData,a];
        return ab.length <= 200 ? ab : ab.splice(1);
      });
    });
  },[]);

  return (
    <div className='App'>
      <h1>size of data is :- {data.length}</h1>
      <LineChart width={1000} height={500} data={data}>
        <XAxis dataKey='name' />
        <YAxis />
        <Line dataKey='value' />
      </LineChart>
    </div>
  );
}

export default App;

这里是 react 中实时图表的代码，我有一个 socket.io 连接，服务器每秒至少发出 150 个值。图表在前 60 秒运行良好，但在那之后，它开始滞后。我无法在这里查明问题。

我之前也问过这个问题，Nick 在哪里帮助我实现了这个结果，但还不是很顺利。 非常感谢帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）