リアクションで状態を持ち上げる正しい方法

Question

私はリアクションが新しく、データグリッドを作成しようとしていますが、今は動作していますが、間違っているような気がします。ここに詳細があります：

各行には複数の入力（テキスト、選択、ボタン）があり、削除、挿入行ができます。

今私はすべてのデータをオブジェクトの配列として保持するGridComponentを持っています。入力が変化したときに、それが呼び出すためにハンドルをRowComponentにオブジェクトを渡しますレンダリングに：

this.state.data.map((rowdata, index) => 
    <RowComponent key={rowdata.id} rowdata={rowdata} dataindex={index} handleChange={this.handleChange} />) 

問題はRowComponentがhandleChangeを呼び出すときに、GridComponentがオブジェクトを更新するために、rowIndexプロパティを使用しています。しかし、それは遅く、入力中に少し遅れがあります。

この問題を解決するために、私は入力中にデータを制御するためにRowComponentで状態を宣言し、onBlurイベントでhandleChangeを呼び出すだけで、非常にうまく動作しています。しかし、今私はグリッドと行に2つの状態があります、それは正しい方法ですか？

Answer 1

profiledあなたのコードは最も遅いものを識別するためのコードですか？

フラックスを使用せずに許容された方法でこれを行ったようです。これは頻繁にかつ予防可能なレンダリングが多い問題です。ほとんどshouldComponentUpdateの小切手を置くことの問題。 fixこれらを外さなければ、外部化状態は助けになりません（MobXのようなforceUpdateベースのアプローチを使用するライブラリを除く）。

また、入力の場合は、debouncedイベントハンドラを使用するか、またはシャドウ内部状態（以前のように）を使用して、すべての変更を直ちに伝えることをお勧めします。