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;