javascript - 具有数百个输入的巨大 React 状态数组，状态变化缓慢 onChange

Question

我正在尝试使用大型 React 表单，但表单中的每个输入都很复杂并且具有复杂的状态。我将所有输入的状态保存在 parent 中组件，每个输入都包含在 child 中零件。我在父级中有一个状态数组，其中包含所有输入元素的当前状态值。目前，每次有onChange在输入中，我尝试通过 setState() 重置父级中的整个状态数组.最多 5 个输入是可以的，但是一旦超过这个值(比如 100 个输入)，我开始注意到程序中有一些严重的滞后。 请注意 : 该程序还允许您重新排列，delete , 和 add输入，因此状态需要适应这些变化 IE。第一个输入可以与第二个输入交换位置，或者在第 10 个输入之后插入。

我的目标是找到一种方法来优化这个 onChange 的性能。最终，我真的不需要将数据放在 parent 中。组件，我只需要在单击 save 时收集输入的值在页面的底部。

重申一下，我有两个组成部分。

父组件

子组件

Child 组件基本上是 input用户可以在其中编写数百行文本。

Parent 组件包含 100 个子组件，基本上如下所示:

export default function Parent(props) {
  const [state, setState] = useState(createDummyData());
  useEffect(() => {});



  const onInputChange = (value, index) => {
    var tempValue = [...state];
    tempValue[index] = value;
    setState(tempValue);
  };

  return (
    <>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {state.map((item, index) => (
          <Child
            value={state[index].content}
            index={index}
            onChange={onInputChange}
          />
        ))}
        <button style={{backgroundColor: "red"}}>save input data</button>
      </div>
    </>
  );
}

子组件看起来像这样

export default function Child(props) {
  useEffect(() => {});

  const onChange = event => {
    props.onChange(event.target.value, props.index);
  };

  return (
    <>
      <input value={props.value} onChange={onChange} />
    </>
  );
}

我还没有找到解决这个问题的简单方法。有些人似乎建议使用 Redux，其他人似乎建议使用 useMemo 的组合和 useEffect以防止重新渲染。您的帮助将不胜感激。

我注意到的一件事是，如果我尝试将单个状态保留在子组件中，它们会呈现 onChange快多了。这可能是因为它不必每次都为父状态数组设置状态。如果可能的话，我希望能够在单击保存时简单地通过并获取子节点的状态。我会使用 ref在这种情况下？没有引用可以做到吗？

我也想避免使用 onBlur()只是为了这个项目的目的

将代码框复制到下面以供引用: https://codesandbox.io/s/cocky-knuth-jm8n6?fontsize=14

Answer 1

创建了具有类似功能组件和虚拟数据的示例:

https://codesandbox.io/s/recursing-cdn-q4vx0

必须创建具有本地项目状态的子组件并与主数组同步。
添加了删除和添加。

使用对象数组作为您的样本。