大React状态对象的性能问题

Question

我有一个函数updateRowValue，它根据用户输入更新表中一行的值。有11列的值可以由用户更新，用户可以添加/删除行。我目前正在一张有7行的桌子上进行测试，在按下键盘上的键和屏幕上出现的变化之间存在严重的滞后。

每次用户按下键盘上的键，状态都会更新(我使用的是受控的MUI TextField(。我不认为投入的数量是实际的问题(尽管我可能错了(。我认为问题在于，每次更新值时，我都必须遍历table_rows对象。

我的问题基本上是：我能在用户每次按下键盘上的键时更新值，并让应用程序对按键做出反应吗？如果是，那么怎么做呢？

function updateRowValue(row_id, attribute, new_value){
const new_row = Object.assign(table_rows[row_id], {[attribute]: new_value});
const newState = Object.assign(table_rows, { [row_id]: {...table_rows[row_id], ...new_row} });
setTableRows({...table_rows, ...newState});
}

Answer 1

我找到了一个替代我所创建的整个混乱的方法。我没有试图优化保存状态的方式(这可能根本不可能(，而是意识到我实际上并不需要状态。我可以直接访问表单值。

通过将inputProps={{"data-row": row_id, "data-cell": cell_id}}添加到TextField，然后使用document.querySelectorAll("[data-row]")，可以在实际需要使用时轻松快速地访问所有单元格及其数据(在我的情况下，将它们保存到数据库中(。