大型 json 结构的 ReactJS 中的滞后输入

Question

在反应中，我正在为JSON对象创建一个表单。我有一个大型 JSON 对象，其结构为：

{
"prop1": {
"someProp": {
"value": 2,
"metadata": {
"somemetadata": "somevalue"
}
}
},
"prop2": {
"someOtherProp": {
"value": 3,
"metadata": {
"editable": true
}
}
},
...otherProps
}

对象的每个顶级属性都需要在表单中显示为选项卡，该表单将其所有子属性显示为我创建的可编辑字段

Object.keys(object[tab]).map((key, i) => {
<TextField value={object[tab][key].value} onChange={handler(tab, key} />
})
//handler function
const handler = (tab,key) => e => {
object[tab][key].value = e.target.value;
//using redux action:
setDataObject({...object});
}

这里的问题是，由于 json 结构非常大，onChange 重新渲染变得非常慢。去抖动输入并没有真正的帮助。我想知道使输入更快的最佳方法。

我想尝试的一种方法是在 React 中使用refs，但我不确定如何动态创建它们。任何帮助将不胜感激。

Answer 1

如果您向TextField添加key字段，您的应用程序只会重新呈现它需要的内容。像这样：

Object.keys(object[tab]).map((key, i) => {
<TextField key={`${i}_${object[tab][key].value}`} value={object[tab][key].value} onChange={handler} />
})