React: Abgleichsleistungsfunktion vs. Klassenkomponenten
Möchten Sie eine Funktion anfordern oder einen Fehler melden?
weder/Fehler
Wie ist das aktuelle Verhalten?
Beim Migrieren von Klassenkomponenten zu Funktionskomponenten (mit Hooks) habe ich einen erheblichen Leistungsabfall festgestellt. Ich habe eine Komponente (genannt TreeNodeComponent ), die Teil einer Baumstruktur ist. Abhängig von der Baumgröße können Hunderte von Instanzen sichtbar sein.
Das Einpacken der Funktionskomponente in eine PureComponent reduzierte die beobachtete "
"Renderzeit", beobachtet in Chrome Dev Tools
Kontext:
Die App rendert Hunderte dieser TreeNodeComponent in einem tree-structure . Wenn ein übergeordnetes Element aktualisiert wird, müssen alle direkten untergeordneten Elemente abgeglichen werden.
Projekt: https://github.com/thomasnordquist/MQTT-Explorer
Was ist das erwartete Verhalten?
Vergleichbare Leistung zwischen Funktions- und Klassenkomponenten.
Welche React-Versionen und welche Browser/Betriebssysteme sind von diesem Problem betroffen?
OSX
Chrom 73 / Elektron 5.0.5
Reagieren 16.8
Typoskript & Webpack
thomasnordquist
Alle 3 Kommentare
Das Einpacken der Funktionskomponente in eine PureComponent reduzierte die beobachtete "Renderzeit" erheblich. (Von ~160ms bis ~60ms)
Das ist zu erwarten, wenn das Rendern von TreeNodeComponent teuer ist. React.PureComponent springt früh aus, wenn sich die Requisiten nicht geändert haben.
Beim Migrieren von Klassenkomponenten zu Funktionskomponenten (mit Hooks) habe ich einen erheblichen Leistungsabfall festgestellt.
Wollen Sie damit sagen, dass der Wechsel von einer Klasse, die React.Component zu einer Funktionskomponente erweitert, eine Leistungsregression verursacht hat? Oder nutzten Sie bereits React.PureComponent (oder shouldComponentUpdate )
Sie können React.memo , um dieselbe Bailout-Semantik mit Funktionskomponenten zu erhalten.
aweary
am 11. Juli 2019
Ich bin von einem React.Component mit shouldComponentUpdate migriert.
Ich verwende React.useMemo , um "Rendering" zu vermeiden.
React.memo liefert so gute Ergebnisse wie die von PureComponent . (~50-60ms)
Vielen Dank für die Aufklärung.
thomasnordquist
am 11. Juli 2019
Ich habe nicht herausbekommen, was besser vorformt: Funktionskomponenten oder Klassenkomponenten. Was soll ich für lange Listen verwenden
TheMisir
am 27. Nov. 2019
Verwandte Themen
bloodyowl
·
3Kommentare
framerate
·
3Kommentare
trusktr
·
3Kommentare
DimitarChristoff
·
3Kommentare
UnbearableBear
·
3Kommentare
Hilfreichster Kommentar
Das ist zu erwarten, wenn das Rendern von
TreeNodeComponentteuer ist.React.PureComponentspringt früh aus, wenn sich die Requisiten nicht geändert haben.Wollen Sie damit sagen, dass der Wechsel von einer Klasse, die
React.Componentzu einer Funktionskomponente erweitert, eine Leistungsregression verursacht hat? Oder nutzten Sie bereitsReact.PureComponent(odershouldComponentUpdate)Sie können
React.memo, um dieselbe Bailout-Semantik mit Funktionskomponenten zu erhalten.