react-table 对 react-select 非常慢：如何加快速度？

Question

我有 table 的 editable 数据显示 react-table。我正在为单元格使用 react-select。每当我更改条目时，页面更新都需要很长时间（接近一秒）。我怎样才能加快速度？

这是官方“editable table”示例的分支：https://codesandbox.io/s/gracious-cdn-fcu3i?file=/src/App.js，修改为使用 <Select> 而不是 <input>。

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

 // 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)
}

这样就解决了 Tab 键问题，我相信，但是数据输入呢？例如，是否可以将其设为异步，否则会产生危险的后果？

Answer 1

他们对输入使用 onBlur 的原因是为了避免在每次击键后重新渲染整个 table，选择你没有同样的问题，所以你不需要要完全使用 onBlur，只需在 onChange 处理程序中报告更新（也无需将值保留在单元格状态中）。也就是说，整个解决方案看起来并不是特别有效 - 每次更改后 table 都会重新呈现两次。我将 updateMyState 封装到 useCallback 中，将 SelectCell 封装到 memo 中，这似乎使它好一点，但您可能想找到另一种方法，特别是如果您有一个大table。不管怎样，看看这里https://codesandbox.io/s/tender-night-vymfi?file=/src/App.js

react-table 对 react-select 非常慢：如何加快速度？

react-table is extremely slow with react-select: how to speed it up?

reactjs

react-select

react-table