React 16.5 erhält ein neues Plug-in zur Performanceanalyse

Der React DevTools Profiler erlaubt das Erstellen von Graphen, die die Rendering-Performance der App-Bestandteile auflisten.

In Pocket speichern vorlesen Druckansicht 1 Kommentar lesen
React 16.5

Das React-Logo

(Bild: Facebook, via Wikimedia Commons))

Lesezeit: 2 Min.
Von
  • Björn Bohn

Version 16.5 von Facebooks qulloffener JavaScript-Bibliothek React ist erschienen. Neben zahlreichen Fehlerbehebungen gibt es auch eine neue Warnung für die React.forwardRef-Renderfunktion, eine verbesserte Fehlernachricht für createElement sowie Support für den React DevTools Profiler. Außerdem liegt ein neues Package für die kooperative Scheduling-Arbeit im Browser vor.

Die React.forwardRef.API hat bereits in React 16.3 Einzug in die Bibliothek erhalten. Brian Vaughn, Mitglied des React-Teams, erklärt im Issue zur neuen Fehlermeldung, dass Entwickler die API bisher noch nicht richtig eingesetzt haben. In React 16.5 gibt es jetzt eine Warnung, wenn Entwickler die Funktion nicht mit genau zwei Argumenten verwenden. Das Team hat ebenfalls die Fehlerbenachrichtigung beim versehentlichen Weitergeben eines Elements an CreateElement überarbeitet.

Gänzlich neu ist hingegen das React-DevTools-Profiler-Plug-in. Es nutzt die ebenfalls neuen Profiler Timings, um Diagramme für die Rendering-Performance einer Applikation zu erstellen. Brian Vaughn stellt als Beispiel einen Flame Graph vor, der alle Teile der Applikation anzeigt. Die Breite der einzelnen Teile basiert auf der treeBaseTime, also der letzten Renderdauer. Die Farbe basiert hingegen auf der Renderzeit relativ zu der längsten Zeit des Commit.

Die Demo zeigt den neuen React DevTools Profiler im Einsatz

(Bild: Brian Vaughn)

Darüber hinaus gibt es in React 16.5 ein neues Package, das aber noch im experimentellen Status vorliegt. Es soll das ReactDOMFrameScheduling-Modul in ein separates Paket schieben. React nutzt es bereits intern, die öffentliche API ist aber noch nicht finalisiert. Eine vollständige Liste der Neuerungen findet sich in den Release Notes auf GitHub. (bbo)