对reactjs来说非常新。我有一个reactjs应用程序，用react-chartjs-2显示一些图表。我通过api调用为图表提供数据。如果图表多达三个，应用程序运行得很快。但是，当我添加图表时，应用程序运行得越来越慢。变慢的是图表的绘制。我的数据从api快速获得，但图表最初什么也不显示，几秒钟后显示出来。此外，我尝试了另一个react图表库（nivojs）和行为是一样的。我添加的图表越多，得到的速度就越慢。所以这让我认为这是一个React问题（我的意思是从我这边来看实现不好），因为我没有任何经验。下面是我的动态组件的代码，用chartjs呈现图表。我已经禁用了React中的严格模式，从性能的Angular 看没有任何变化。为了显示所有这些图表，我使用滑动条作为滑块，但不会导致任何性能问题，因为无论是在滑动器内部还是外部渲染，性能都保持不变。x1c 0d1x

import { useState, useEffect, Fragment } from "react";
import "./BarChart.css";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import { Dna } from "react-loader-spinner";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
  animation: false,
};

function BarChart(props) {
  const [chartData, setChartData] = useState({});
  const [xAxis, setXAxis] = useState([]);
  const [yAxis, setYAxis] = useState([]);
  const [slideTitle, setSlideTitle] = useState("");
  const [htmlText, setHtmlText] = useState("");
  const [paragraphTitle, setParagraphTitle] = useState("");
  const [loaded, setLoaded] = useState(false);

  useEffect(
    function () {
      fetch(`this is a call to my api`)
        .then(function (response) {
          return response.json();
        })
        .then(function (data) {
          setXAxis(data.data[props.slideData.xAxis]);
          setYAxis(data.data[props.slideData.yAxis]);
          setChartData({
            labels: xAxis,
            datasets: [
              {
                label: "Users Gained",
                data: yAxis,
                backgroundColor: ["red"],
                borderColor: "red",
              },
            ],
          });
          setSlideTitle(data.data.slide_title);
          setHtmlText(data.data.html_text);
          setParagraphTitle(data.data.paragraph_title);
          setLoaded(true);
        });
    },
    [loaded]
  );

  if (!loaded) {
    return (
      <div style={{ textAlign: "center" }}>
        <Dna
          visible={true}
          height="20vh"
          width="20vw"
          ariaLabel="dna-loading"
          wrapperStyle={{}}
          wrapperClass="dna-wrapper"
        />
      </div>
    );
  } else {
    return (
      <Fragment>
        <div className="slideTitle w-100">
          <h1 className="mt-5">{slideTitle}</h1>
          <div className="pseudoBorder"></div>
        </div>
        <div className=" d-flex justify-content-between align-items-center">
          <div className="chart col-10">
            <Bar data={chartData} options={options} />
          </div>
          <div className="text-for-chart col-2 p-4">
            <p className="paragraphTitle text-danger ">{paragraphTitle}</p>
            <div
              className="htmlText"
              dangerouslySetInnerHTML={{ __html: htmlText }}
            />
          </div>
        </div>
      </Fragment>
    );
  }
}

export default BarChart;