Javascript 防止在react表中进行不必要的重画

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

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

const[selecteds，setselecteds]=useState（newset（））；
...
返回(
...
...

问题是对

selectedds

的任何更改都会导致整个表的重画，即使只选择了一行。这可以通过在行级别上使用

React.memo（）

轻松解决，下面是我的实现：

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

如果我们将单个复选框选中状态与

selectedds

分离，它会变得非常快：（唯一的变化是在index.js中）

解决此问题的正确反应方式是什么？我是否需要在单元格级别而不是行级别上使用

React.memo（）

？我正在寻找一个可以在

DataTable

中实现的通用修复方法，而不是仅限于此情况