如何解决Recharts 渲染缓慢问题
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://localhost:4001";
function App() {
const [data,updateData] = useState([]);
const socket = socketIOClient(ENDPOINT,{
transports: ['websocket','polling']
});
useEffect(() => {
socket.on("a",a => {
updateData(currentData => [...currentData,a])
});
},[]);
if(data.length>200)
{
updateData(data.shift())
}
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;
这是我的代码,我每秒从 socket.io 获得最多 200 个数据。代码工作正常,但随着时间的推移它开始滞后,图形渲染变慢。
谁能告诉我如何修复或优化它。
解决方法
这里有一个反模式,你调用的是直接修改状态的 data.shift()
,这是一个没有。
另一个问题是你的长度检查在 useEffect 之外。
相反,像这样使用 Array.slice():
import React,{ useState,useEffect,useMemo } from 'react';
import './App.css';
import { Line,LineChart,XAxis,YAxis } from 'recharts';
import socketIOClient from 'socket.io-client';
const ENDPOINT = 'http://localhost:4001';
function App() {
const [data,updateData] = useState([]);
const socket = socketIOClient(ENDPOINT,{
transports: ['websocket','polling'],});
useEffect(() => {
socket.on('a',(a) => {
updateData((currentData) => {
const a = [...currentData,a];
return a.length <= 200 ? a : a.splice(1);
});
});
},[]);
const graph = useMemo(() => {
return (
<LineChart width={1000} height={500} data={data}>
<XAxis dataKey='name' />
<YAxis />
<Line dataKey='value' />
</LineChart>
)
},[data]);
return (
<div className='App'>
<h1>size of data is :- {data.length}</h1>
{graph}
</div>
);
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。