Ich habe eine große Liste, sagen wir 3k-Mitglieder. Ich habe eine Komponente, die diese Liste und eine Komponente für jeden Listeneintrag rendert. In der äußeren Komponente haben wir einen Code wie folgt:
%Vor%Und dann in unserem JSX platzieren wir die Liste:
%Vor% Hier ist der Haken: Ich möchte den Benutzer anzeigen, wenn er auf einen Artikel klickt, für den der Artikel ausgewählt wurde. In meiner ListItem -Komponente habe ich also Code, der, abhängig davon, ob der einzelne Artikel eine selected -Eigenschaft hat oder nicht, sich selbst hervorhebt. Wie kann ich verhindern, dass React die gesamte Liste neu rendert, wenn sich nur die ausgewählte Eigenschaft für ein einzelnes Element ändert? Ich bin mir sicher, dass ich meinen Code irgendwie umstrukturieren muss, aber ich bin mir nicht sicher, welche Struktur das ist Löse dieses Problem. Gerne alle Fragen zu beantworten und danke im Voraus!
Hinweise:
Okay, ich habe es herausgefunden. Die erfolgreiche Implementierung von shouldComponentUpdate für jeden einzelnen Artikel bringt eine massive Leistungssteigerung. Ich hatte dies aus einem einfachen Grund versäumt.
Wie auch immer ... Ich tat dies auf meiner Erklärung zu jedem Punkt:
%Vor% Was bedeutet, dass this.props.onClick === nextProps.onClick immer false zurückgibt, so dass sich jedes einzelne Element immer als neu gerendert deklarieren würde. Nach der Implementierung eines benutzerdefinierten Checks ist es jetzt extrem schnell!
Tags und Links javascript optimization performance reactjs