Reagieren ReduX Best Practice für die Tabellenzeile Aktion

Ich habe eine Liste von Elementen. Ich render eine Tabelle Komponente mit dieser Liste. Ich möchte für jede Zeile ein Kontrollkästchen hinzufügen. Muss ich eine separate Komponente für die Tabellenzeile selbst verwenden, um den aktuellen Zeilenstil festzulegen, indem Sie sie prüfen, ohne die gesamte Tabelle zu rendern? Wenn ich jetzt die ausgewählte Eigenschaft des Elements ändere, wird die gesamte Tabelle gerendert.Reagieren ReduX Best Practice für die Tabellenzeile Aktion

Thanks :)

Quelle

2017-03-22 user3712353

Reagieren hat intelligente erneute Rendering, also würde ich nicht über die Leistung sorgen. Es gibt keinen richtigen Weg, wie Sie Ihre Komponenten teilen. Für mich ist es natürlich, dass die Reihe eine separate Komponente ist. – disstruct

Eigentlich stelle ich diese Frage, weil ich Leistungsprobleme habe. Ich rendere die Tabelle mit einer Liste von Elementen und wähle dann jede Zeile aus, an die ich eine Aktion absende, die die Auswahleigenschaft des Elements ändert. Aber wenn mehr als 200 Zeilen angezeigt werden, wird es sehr langsam, und meine Gedanken sind, weil ich keine separate Komponente für die Zeile selbst verwendet habe. – user3712353

Wenn Ihre gesamte Tabelle neu machen, sollten Sie deutlich Ihren Code aktualisieren, das zu vermeiden. Wie Sie bereits gesagt haben, können Sie für jede Zeile eine Komponente haben, sodass bei einer Zeilenaktualisierung nur die Zeile erneut gerendert wird. Ich empfehle Ihnen dringend, dies zu tun. Achten Sie darauf, eine Schlüsselstütze in jede Zeile einzufügen, um Leistungsverlust zu vermeiden. Sie können auch die -Methode verwenden, um unnötiges Rendern zu vermeiden. Wenn Sie Ihre Props von der Tabellenkomponente an die Zeilenkomponente übergeben, stellen Sie sicher, dass die Objekte, die Sie übergeben, einmalig sind und nicht zu oft geändert werden. Wenn Sie nach all dem bemerkt haben, dass die Zeile oft aktualisiert und neu gerendert wird, können Sie versuchen, react-virtualized zu verwenden. Diese Bibliothek rendert nur die Zeilen, die auf dem Bildschirm sichtbar sind. Wenn Sie weitere Hilfe benötigen, können Sie auch Code freigeben.

Quelle

2017-03-22 23:41:43

Jetzt ist es klarer :) Meine zweite Frage ist, wie man die Auswahloperation durchführt - muss ich den ausgewählten Zustand als Eigenschaft für jedes Einzelteil speichern, oder eine Liste der vorgewählten Einzelteile speichern? – user3712353

Wenn Sie einfach auf die ausgewählten Zeilen zugreifen möchten, empfehle ich Ihnen, den Wert nicht in jedem Element zu belassen, sondern im redux-Status zu speichern, wenn Sie sie an anderer Stelle in der App oder in der Tabellenkomponente benötigen Zustand. Sie können übergeben, wenn die Zeile ausgewählt ist oder jetzt als eine Stütze für die Zeilenkomponente. –

Reagieren ReduX Best Practice für die Tabellenzeile Aktion

Antwort

Verwandte Themen