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

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) => {

  console.log([cell, cindex], `rendered`);

  return (

    <td key={cindex}>

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

    </td>

  );

});

每次单元格更改时，都会呈现所有表。

我们可以用和一些修复关闭问题来修复它：React.memouseRef

const Entry = ({ value, rindex, cindex, onChange }) => {

  console.log([rindex, cindex], 'rendered');

  const textRef = useRef();

  const $onChange = () => {

    onChange(prev => {

      let tempArr = [...prev];

      tempArr[rindex][cindex] = textRef.current.value;

      return tempArr;

    });

  };

  return (

    <td>

      <textarea ref={textRef} value={value} onChange={$onChange} />

    </td>

  );

};

const MemoEntry = React.memo(Entry);

const Table = () => {

  const [initData, setInitData] = useState([['a', 'b', 'c'], ['a', 'b', 'c']]);

  return (

    <>

      <table>

        <tbody>

          {initData &&

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

              <tr key={rindex}>

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

                  return (

                    <MemoEntry

                      key={cindex}

                      rindex={rindex}

                      cindex={cindex}

                      value={cell}

                      onChange={setInitData}

                    />

                  );

                })}

              </tr>

            ))}

        </tbody>

      </table>

    </>

  );

};