Reagieren Tabulatornavigation langsam

Question

I Registerkarten erstellt, wie in diesem Beispiel gezeigt:

http://codepen.io/trey/post/tabbed-navigation-react

Es schön mit wenig Inhalt zu funktionieren scheint, aber eine Tabelle Rendering verlangsamt sich zwischen den Tabs wechseln, vor allem auf mobilen gibt es eine merkliche Verzögerung.

Hier ist das Beispiel mit einem Tisch:

http://jsfiddle.net/xn2bv6v5/

var Content = React.createClass({ 
    render: function(){ 
    ... 

Was ist der Grund für die Langsamkeit?

Mit meinen komplexeren Daten dauert es 3-4 Sekunden, um Tabs auf dem Handy zu wechseln. Ich habe auch versucht, es so zu ändern, dass die Tabs die Sichtbarkeit von zwei Inhaltskomponenten ändern, anstatt zu ändern, was eine Komponente rendert, aber das schien keine Wirkung zu haben.

Die einzige Sache, die geholfen hat, war die Inhaltselemente Sichtbarkeit mit pure js zu wechseln, so dass keine Reaktion rendert passieren, so dass etwas grundlegend falsch mit dem Reagieren Teil sein muss, kann ich nicht sagen was?

Answer 1

Wenn Ihre anfängliche Renderzeit kein Performance-Problem darstellt, können Sie alle Tab-Inhalte gleichzeitig rendern und dann in einfache Wrapper einfügen, die sie anzeigen/verbergen. Dann nur ihre Sichtbarkeit wechseln. Stellen Sie sicher, dass der Sichtbarkeitsschalter in einer anderen Komponente als in den schweren Inhalten vorhanden ist.

Dann stellen Sie sicher, dass Sie auf den Inhalt und alle tieferen Elemente implementieren, so dass React überspringen Diffing Komponenten schneller, wenn es weiß, dass es keine Änderungen gibt sowieso. Wenn Sie Ihre tieferen Layouts über mehrere Komponenten mit gut implementierten shouldComponentUpdate Funktionen aufteilen, sollte dies zu einer erheblichen Verbesserung der Aktualisierungen Ihrer Ansicht führen.

Die folgende Dokumentation gibt Ihnen einige weitere Informationen über shouldComponentUpdate, wie Sie es umsetzen soll und wie es hilft, die Leistung zu verbessern: https://facebook.github.io/react/docs/advanced-performance.html