ReactJS动态大表格带实时计算时输入框卡顿问题的优化方案咨询

我正在开发一个ReactJS应用，里面有个支持无限添加行的表格，每行包含10个输入字段（列）。顶部还有一个固定的总计行，需要实现两个核心功能：

• 按列统计所有行的数值总和，实时显示列总计
• 每行末尾显示该行所有列的数值总和
  所有总计都要在用户输入内容时实时更新计算。

遇到的问题 #

当添加较多行（比如50行以上）后，输入框会变得异常卡顿，几乎无法正常输入。我推测这是状态更新和组件重渲染导致的，但始终找不到简洁高效的优化方案。

当前实现代码 #

import React, { useState } from "react";

const NUM_COLS = 10;

const TableWithTotals = () => {
  const [rows, setRows] = useState([[...Array(NUM_COLS).fill("")]]);

  const handleInputChange = (rowIndex, colIndex, value) => {
    const updatedRows = [...rows];
    updatedRows[rowIndex][colIndex] = value;
    setRows(updatedRows);
  };

  const addRow = () => {
    setRows([...rows, [...Array(NUM_COLS).fill("")]]);
  };

  const getColumnTotal = (colIndex) =>
    rows.reduce((sum, row) => sum + Number(row[colIndex] || 0), 0);

  const getRowTotal = (row) =>
    row.reduce((sum, val) => sum + Number(val || 0), 0);

  return (
    <div>
      <button onClick={addRow}>Add Row</button>
      {/* Totals Row */}
      <div style={{ display: "flex", fontWeight: "bold", marginTop: "10px" }}>
        {Array.from({ length: NUM_COLS }).map((_, colIndex) => (
          <input
            key={`total-${colIndex}`}
            value={getColumnTotal(colIndex)}
            readOnly
            style={{ width: "80px", margin: "2px" }}
          />
        ))}
        <input
          value="-"
          readOnly
          style={{ width: "80px", margin: "2px" }}
        />
      </div>
      {/* Data Rows */}
      {rows.map((row, rowIndex) => (
        <div key={rowIndex} style={{ display: "flex" }}>
          {row.map((val, colIndex) => (
            <input
              key={colIndex}
              value={val}
              onChange={(e) =>
                handleInputChange(rowIndex, colIndex, e.target.value)
              }
              style={{ width: "80px", margin: "2px" }}
            />
          ))}
          <input
            value={getRowTotal(row)}
            readOnly
            style={{ width: "80px", margin: "2px", fontWeight: "bold" }}
          />
        </div>
      ))}
    </div>
  );
};

export default TableWithTotals;

已尝试的优化方案 #

• 给输入变更事件添加了防抖处理，但卡顿问题依然存在
• 用useReducer替代useState管理状态，没有看到明显的性能提升
• 尝试了列表虚拟化，但视口内的行计算仍然感觉有延迟

我想寻求的帮助 #

• 如何优化当前的实现，让多行场景下输入框不再卡顿？
• 有没有推荐的React模式，用于处理带实时计算的大数据集？
• 如果有必要，我完全接受对现有方案进行重构！

内容来源于stack exchange