Reagieren langsam auf Eingangsänderung arbeitet

Question

ich ziemlich neu bin, ein Problem zu reagieren und auf beim onChange Verfahren auf einem Eingabefeld verwenden, die in einer großen Datenliste erzeugt wird.
Als parentcomponent ist der Eigentümer der Daten, biete ich eine handleUpdate() Methode für das Kind Komponente (dataTableComponent).
Da React das ganze Datatridat neu rendern muss, ist der Eingang onChange sehr langsam.
Wie würde ich das besser machen? Gibt es eine Möglichkeit, nur die eine modifizierte Zeile zu aktualisieren. Oder was mache ich falsch mit reagieren?

Zusammenfassung: Parent enthält ein Array mit Objekten, die den childComponent geben wird. Die childComponent erstellt ein <table> -Element mit Datenobjektattributen als Spalten. Eine Spalte ist editierbar und wird als <input> Tag angezeigt. Dieses Tag hat eine onChangehandler, die auf eine Funktion verweist, die von dem übergeordneten Element übergeben wird. Der Elternteil übernimmt also das Update und gibt die gesamte Liste neu. Für mich ist klar, dass dies langsam sein muss. ABER wie könnte ich das besser machen?

Answer 1

Ich habe versucht, es wie @ sagte Piyush.kappor. Aber ich dachte immer, das ist nicht nett. Das Datum wurde redundant gespeichert.

Jetzt habe ich endlich eine Lösung gefunden.

Ich habe es, wie es war:

die App eine Liste von Objekten enthält und je Eingangswechsel behandelt. Das wäre sehr langsam, aber jetzt habe ich eine shouldComponentUpdate() Methode hinzugefügt. So überprüft jede einzelne Zeile, ob sie aktualisiert werden muss. Wenn nicht, wird es nicht. So habe ich keine Verzögerungen mehr, aber die Daten werden immer noch an einem Ort behandelt.

Answer 2

Ich habe dieses Problem früher konfrontiert.

Machen Sie Ihre jede Zeile als eine separate Komponente und fragen Elternkomponente Requisiten darin zu bestehen. Im Konstruktor der Zeilenkomponente, Requisiten im Zustand speichern und jetzt nur mit dem Status spielen, rufen Sie den Eltern-Handler nicht auf, um ihn zu aktualisieren.

Wenn Sie alle Ihre Eingabefelder aktualisiert zurück, Verwendung Refs in der Stammkomponente zu extrahieren Daten

Beispiel:

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}/> 
    } 
}