javascript - 对于大型 json 结构，ReactJS 中的滞后输入

Question

在 React 中，我正在为 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

如果您将 key 字段添加到您的 TextField，您的应用将只重新呈现它需要的内容。像这样:

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