ReactJS 仪表板所有图表每次都会重新渲染

Question

reactJS。创建了多个图表，例如条形图、饼图。当这些图表放置在仪表板中并且如果我对条形图进行排序时，饼图也会重新呈现。如果仪表板包含 5-6 个图表并且每次都会渲染所有图表，这会降低性能。当我对条形图进行排序或限制记录时，如何仅渲染条形图。该仪表板页面是动态的，就像一个仪表板可能包含 4 个图表，另一个仪表板可能包含 10 个图表。

我不太擅长reactJS。如何在reactJS中实现这一点

Answer 1

您可以使用 useMemo() Hook。 React 中的 useMemo 钩子用于记忆，这是一种性能优化技术，有助于避免不必要的重新计算或重新渲染值（例如组件或计算数据），除非其依赖项已更改。当您需要避免在每次渲染时重复进行昂贵的计算或渲染过程时，它特别有用。

import BarChart from './BarChart'; 
import PieChart from './PieChart';

const Dashboard = () => {
  // State for Bar Chart
  const [barChartData, setBarChartData] = useState();
  const [sortedData, setSortedData] = useState();

  // State for Pie Chart
  const [pieChartData, setPieChartData] = useState();

  // Function to handle sorting for the Bar Chart
  const handleSort = () => {
    // Perform sorting logic here and update the barChartData state accordingly
    const sorted = /* perform sorting */;
    setSortedData(sorted);

    // Update barChartData with sorted data
    setBarChartData(sorted);
  };

  // Function to handle limiting records for the Bar Chart
  const handleLimit = () => {
    const limited = /* perform limiting */;
    setBarChartData(limited);
  };

  // Memoized Bar Chart component
  const MemoizedBarChart = useMemo(() => (
    <BarChart data={barChartData} />
  ), [barChartData]);

  // Memoized Pie Chart component
  const MemoizedPieChart = useMemo(() => (
    <PieChart data={pieChartData} />
  ), [pieChartData]);

  return (
    <div>
      {MemoizedBarChart}

      {MemoizedPieChart}

      <button onClick={handleSort}>Sort Bar Chart</button>

      <button onClick={handleLimit}>Limit Records</button>
    </div>
  );
};

export default Dashboard;