web-dev-qa-db-ja.com

巨大React react $ === State Array）、遅い状態変更がonchange

私は大きなReact形をしようとしていますが、フォーム内の各入力は複雑で複素状態です。すべての入力の状​​態をparentコンポーネントに保持し、各入力はchildコンポーネントにラップされます。私は、すべての入力要素の状態の現在の値を含む状態の状態配列を持っています。現在、入力にonChangeがあるたびに、setState()を介して親の状態配列全体を親にリセットしようとします。これは最大5つの入力で大丈夫でしたが、（百の入力のように）それを上回ったら、私はプログラムのいくつかの深刻な遅れに気づき始めました。 :プログラムには、delete、add入力を並べ替えることもできます。それらの変化の変化に対応する。第1の入力は、第2の入力で位置を交換することも、10番目の入力直後に挿入されます。

私の目的は、このonchangeのパフォーマンスを最適化する方法を見つけることです。最終的には、parentコンポーネントに入るデータが実際には必要ありません。ページの下部にsaveをクリックすると、入力の値を収集する必要があります。

繰り返しただけで、私は2つのコンポーネントを持っています。

  1. 親コンポーネント

  2. 子供コンポーネント

子コンポーネントは基本的にinputここで、ユーザーは数百行のテキストを書き込むことができます。

親コンポーネントには10​​0が含まれており、本質的にこのようになります。

_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の組み合わせを使用してレレンダーを防ぐように見えるようです。あなたの助けが大いに評価されるでしょう。

私が気づいたことの1つは、子コンポーネント内に個別の状態を保存しようとすると、onChangeをはるかに速くレンダリングします。これはおそらくそれが毎回親状態の配列を設定する必要がないためです。可能であれば、保存をクリックすると、単に行くことができ、子ノードの状態をつかみます。この場合、refを使いますか？ REFなしでそれをすることは可能ですか？

このプロジェクトの目的のためだけにonBlur()を使用しないでください。

CodesAndboxは参照のために下にコピーされます. https：//codesandbox.io/s/cocky-knuth-jm8n6?fontsize=14

javascriptreactjsfrontendstateonchange
12
andul007

大規模な配列をコピーする必要はありません。実際のディープコピーではなく、通常非常に速いオブジェクト参照のみをコピーします。実際、 Redux自体 このようにしてください。

あなたがこの遅れを経験している理由はあなたが子供たちに鍵を設定しませんでした。一意のキーを設定し、indexをキーとして使用しないでください。

1
Mordechai