入力が遅い反応の反応が遅い

Question

大きなデータリストで生成された入力フィールドでonChangeメソッドを使用しているときに、私はかなり反応して問題が発生しました。
parentcomponentはデータの所有者であるため、子コンポーネント（dataTableComponent）にhandleUpdate()メソッドを提供します。
Reactはデータグリッド全体を再レンダリングする必要があるため、入力onChangeは非常に遅いです。
どうすればいいですか？変更された行を1つだけ更新する方法はありますか？または私は何が反応に間違っていますか？

概要：ParentComponentには、childComponentに渡されるオブジェクトを含む配列が含まれています。 childComponentは、データオブジェクト属性を列として持つ<table>要素を作成します。 1列は編集可能で、<input>タグと表示されます。このタグには、親が渡した関数を指しているonChangehandlerがあります。親が更新を処理するので、リスト全体が再レンダリングされます。私にとっては、これは遅くなければならないことは明らかです。しかし、私はこれをより良くすることができますか？

Answer 1

@ Piyush.kapporは語りました。しかし、私はいつもこれがいいとは思っていませんでした。日付を冗長に保存する。

私は最終的に解決策を見つけました。それがあったように私はそれを左

：

をアプリでは、オブジェクトのリストが含まれており、これまでに入力変更を処理します。 これは非常に遅いですが、今はshouldComponentUpdate()メソッドを追加しました。したがって、更新が必要な場合は、すべての行がチェックされます。そうでなければ、それはない。だから私はそれ以上の遅れはありませんが、データはまだ1つの場所で処理されます。

Answer 2

私は以前この問題に直面しました。

各行を別々のコンポーネントとして作成し、親コンポーネントにその中に小道具を渡すように依頼します。行コンポーネントのコンストラクタでは、状態で小道具を格納し、今は状態で再生します。更新する親ハンドラを呼び出さないでください。すべてのあなたの入力フィールドは、親コンポーネントでの使用、参考文献は、データに

例を抽出するために、戻って更新したい場合は

：私は同じようにそれを試してみた

Class Parent extends React.component { 
    render (
      this.data.map(function(value) { 
       return <Row ref={value+index} data={value}/> 
      }) 
    } 
} 

Class Row extends React.Component { 
    constructor() { 
     super(props); 
     this.state = { 
      value: this.props.data 
     } 
    } 
    render() { 
    <input value={this.state.value}/> 
    } 
}