提高大型表数据集的呈现性能

Question

我有一个n x n数组，其中包含用于呈现表单元格的所有数据。

代码示例

const Table = () => {

  const [initData, setInitData] = useState([

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],

    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"]

  ]);

  const handleChange = e => {

    let thisTD = e.target.parentNode;

    let cellIndex = thisTD.cellIndex;

    let rowIndex = thisTD.parentNode.rowIndex;

    let tempArr = [...initData];

    tempArr[rowIndex][cellIndex] = e.target.value;

    setInitData(tempArr);

  };

  return (

    <>

      <table>

        <tbody>

          {initData &&

            initData.map((row, rindex) => (

              <tr key={rindex}>

                {row.map((cell, cindex) => (

                  <td key={cindex}>

                    <textarea value={cell} onChange={handleChange} />

                  </td>

                ))}

              </tr>

            ))}

        </tbody>

      </table>

    </>

  );

};

问题是，每当单元格更改自己的数据时，表的所有单元格都将重新呈现。

如果单元格数量增加，则当用户更改单元格的内容时，这会导致性能降低和滞后。

目前，一切正常，但我想提高性能以进行缩放。在每次更改中重新呈现整个表似乎既愚蠢又昂贵，那么我该如何更改数据结构或我的 React 组件呢？感谢每一个想法！

Answer 1

首先，让我们检查一切是否都呈现出来了：row.map((cell, cindex) => {&nbsp; console.log([cell, cindex], `rendered`);&nbsp; return (&nbsp; &nbsp; <td key={cindex}>&nbsp; &nbsp; &nbsp; <textarea value={cell} onChange={handleChange} />&nbsp; &nbsp; </td>&nbsp; );});每次单元格更改时，都会呈现所有表。我们可以用和一些修复关闭问题来修复它：React.memouseRefconst Entry = ({ value, rindex, cindex, onChange }) => {&nbsp; console.log([rindex, cindex], 'rendered');&nbsp; const textRef = useRef();&nbsp; const $onChange = () => {&nbsp; &nbsp; onChange(prev => {&nbsp; &nbsp; &nbsp; let tempArr = [...prev];&nbsp; &nbsp; &nbsp; tempArr[rindex][cindex] = textRef.current.value;&nbsp; &nbsp; &nbsp; return tempArr;&nbsp; &nbsp; });&nbsp; };&nbsp; return (&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <textarea ref={textRef} value={value} onChange={$onChange} />&nbsp; &nbsp; </td>&nbsp; );};const MemoEntry = React.memo(Entry);const Table = () => {&nbsp; const [initData, setInitData] = useState([['a', 'b', 'c'], ['a', 'b', 'c']]);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {initData &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; initData.map((row, rindex) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr key={rindex}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {row.map((cell, cindex) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MemoEntry&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={cindex}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rindex={rindex}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cindex={cindex}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={cell}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={setInitData}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </>&nbsp; );};