Reactjs react表使用react select时速度非常慢：如何加快速度？

我有一个可编辑的数据表，显示在

react table

中。我正在对单元格使用

react select

。每当我更改条目时，页面更新都需要很长时间（接近一秒钟）。我怎样才能加快速度

这里有一个官方的“可编辑表”示例：修改为使用

而不是

该官方示例中的部分代码更新了blur上的数据：

 // We'll only update the external data when the input is blurred
  const onBlur = () => {
    updateMyData(index, id, value)
  }

这意味着，即使在元素之间切换，速度也非常慢。我可以通过添加一个签入

updateMyData

来解决这一问题，如果数据没有实际更改，则可以中止：

const updateMyData = (rowIndex, columnId, value) => {
  if (data[rowIndex][columnId] === value) return;

  etc. // (otherwise update)
}

---

我相信这解决了标签问题，但是数据输入呢？例如，它是异步的，还是会产生危险的后果？

他们对输入使用

onBlur

的原因是为了避免在每次击键后重新呈现整个表，而使用select则不会出现同样的问题，因此根本不需要使用

onBlur

，只需在

onChange

处理程序中报告更新（也无需将值保持在单元格状态）。尽管如此，整个解决方案看起来并不是特别有效——每次更改后，表都会重新呈现两次。我已将

updateMyState

包装到

useCallback

和

SelectCell

中的

memo

，这似乎使它变得更好，但您可能希望找到另一种方法，特别是当您有一个大表时。无论如何，请看一下这里

非常感谢！我从你的变化中学到了很多。我的桌子甚至不是很大，所以我很惊讶，即使有十几排，它还是非常慢。现在它工作得很好。我注意到，如果单元格已填充，则无法切换回原始值（例如，如果单元格从“kiwi”开始，而您更改为“西瓜”，则无法返回到“kiwi”；我链接的演示没有演示这一点，因为它们都是空白的）。那是因为备忘录，猜猜看？我通过将

useState

放回来修复它。该值作为道具传递，因此

memo

应该考虑它，我不确定它为什么不会更改。不过，如果您乐于使用

useState

，那绝对没问题。很高兴我能帮忙！