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

Question

我正在尝试一个大型的 React 表单，但是表单中的每个输入都很复杂并且具有复杂的状态。我保持parent组件中所有输入的状态，并且每个输入都包装在一个child组件中。我在 parent 中有一个 state 数组，它包含所有输入元素的当前状态值。目前，每次onChange输入中有一个，我都会尝试通过setState(). 最多可以有 5 个输入，但是一旦我超过这个（比如一百个输入），我开始注意到程序中的一些严重滞后。请注意：该程序还允许您重新排列delete、 和add输入，因此状态需要适应这些更改IE。第一个输入可以与第二个输入交换位置或在第 10 个输入之后插入。

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

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

1. 父组件

2. 子组件

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来防止重新渲染。您的帮助将不胜感激。

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

我也想避免onBlur()仅用于这个项目的目的

下面将codesandbox复制下来以供参考：https ://codesandbox.io/s/cocky-knuth-jm8n6?fontsize =14

Answer 1

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

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

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

使用对象数组作为示例。