防止反应表中不必要的重绘

Question

我在 React 中有一个包含几千行的表，其中内容永远不会改变（某些行可能会被过滤掉，但行内容永远不会更新）。每行都有一个复选框可供选择，然后对所选行触发一些进一步的操作。na\xc3\xafve 的实现可能会设置一个包含所有选定元素的 ID 的状态，然后每个复选框将根据其 ID 是否处于该状态来获取其选中属性：

\n\n

const [selectedIds, setSelectedIds] = useState(new Set());\n...\nreturn (\n  <Table>\n  ...\n    <Table.Row>\n    ...\n      <Checkbox id={entry.id} checked={selectedIds.has(entry.id)} onClick={onCheckboxClick} />\n

\n\n

这样做的问题是，任何更改都会selectedIds导致整个表的重绘，即使只选择了 1 行。这可以通过React.memo()在行级别使用来轻松修复，这是我的实现： https: //codesandbox.io/s/table-row-with-checkbox-semantic-lki3x

\n\n

这样，选择任何单行都很快，只有该行会被重绘。但是，如果我们单击表头中的复选框来选择（取消）选择所有行，它会再次变慢，因为现在所有行都必须重新绘制，即使只有 1 个单元格中的复选框发生了更改。

\n\n

如果我们将单个复选框的选中状态与 分离selectedIds，它会变得超级快：https://codesandbox.io/s/table-row-with-checkbox-semantic-tqiqi（唯一的变化是在index.js 中）

\n\n

解决这个问题的正确 React 方法是什么？我需要React.memo()在单元格级别而不是行级别使用吗？我正在寻找可以实施的通用修复，DataTable而不是仅限于这种情况。

\n