Reactjs: spezifische Zeile aktualisieren

Question

Ich möchte Vorschläge für die effizienteste Möglichkeit, eine Preis/Tiefe-Leiter-GUI in Reactjs zu implementieren.

Jeder Leiter stellt ein einzelnes Lager und jede Zeile stellt die verfügbaren Größen und gehandelten Mengen für jeden Preis:

Die Lösung, die ich habe derzeit verwendet eine Liste (in class.state gespeichert) zu machen die Reihen des Lagertisches. Jedes Element in dieser Liste repräsentiert eine Zeile in der Bestandstabelle. Jedes Rendering iteriert über diese Liste, um die im Bild gezeigten Tabellen auszugeben.

var items = []; 
    for (const sid in this.state.stocks) { 
     const rows = this.state.stocks[sid]; 
     items.push(
      <div key={sid} style={{float: 'left'}}> 
       <Ladder 
        rows={rows} 
       /> 
      </div> 
     ); 
    } 
    // doRender 
    return (
     < div id={'container'}> 
      {items} 
     </div> 
    ); 
` 

Die Preise werden häufig aktualisiert und die GUI versucht, mitzuhalten. Ich glaube, das liegt daran, dass bei jedem Update alle Tabellenzeilen neu gezeichnet werden. So oder so funktioniert meine Lösung unter Last nicht gut.

Ich möchte Updates optimieren und sicherstellen, dass nur die betroffenen Zeilen gerendert/verarbeitet werden.

Answer 1

die Leistung der Benutzeroberfläche zu erhöhen, würde ich folgende Dinge vorschlagen:

1. Leiter muss nicht neu rendern, wenn keine Änderungen in den Zeilen besteht. Sie können es als Komponente mit sollteComponentUpdate zum Vergleichen von Zeilen oder reinen Komponenten machen und dafür wiederverwendbare Utils verwenden.
2. Wenn Sie gonna viele Zeilen für jeden Leiter, dann nicht die tiefen Vergleiche tun sollte (die Ressource verbraucht), aber den Vergleich nur die Instanz selbst, wie:

shouldComponentUpdate(nextProps) { 
    return this.props.rows !== nextProps.rows; 
} 

zu tun das müssen Sie die Zeilen korrekt aktualisieren. Wenn eine Zeile geändert wird, müssen die Zeilen der Kontaktplanzeile ein neues Array sein, andernfalls das gleiche Array-Objekt.

3. Die Zeile muss auch eine Komponente sein mit sollteComponentUpdate, um sicherzustellen, gibt es keine erneute Rendern passiert, wenn nicht benötigt.
4. Es sieht so aus, als ob Ihre Datenstruktur ziemlich kompliziert ist. Versuchen Sie also redux zu verwenden und Sie werden es besser testen können.