小编and*_*007的帖子

我正在尝试一个大型的 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 …