React 16.5 ist da: Renderzeit-Profiling und Support für auxclick

React 16.5 veröffentlicht

React 16.5 ist da: Neues DevTools-Plug-in für Performance-Profiling & Support für auxclick

Mit React 16.5 steht das nächste Update für das UI-Framework von Facebook bereit. Mit dabei ist dieses Mal ein Plug-in für die React DevTools, das die Performance beim Rendern einer Anwendung visualisiert. Das ist aber nicht die einzige Neuerung. Auch auxclick wird nun unterstützt und vieles mehr.

React 16.5 ist da und setzt fort, was das React-Team in den vorherigen Releases begonnen hat. Das forwardRef-API, das mit React 16.3 eingeführt wurde, wird laut Brian Vaughn aus dem React-Team noch immer häufig falsch verwendet. Darum bringt React 16.5 eine Neuerung für das API mit: Verwenden Entwickler die Render-Funktion des forwardRef-APIs nicht mit genau zwei Argumenten, wird nun eine Warnung ausgegeben.

React 16.5 veröffentlicht: Profiling der Renderzeit

Neu in React 16.5 ist außerdem der React DevTools Profiler, der mit den ebenfalls neuen Profiler Timings arbeitet. Der Profiler kann dazu genutzt werden, die Performance beim Rendering einer App grafisch darzustellen. Eine Option zur Darstellung, die Vaughn im entsprechenden Pull Request vorstellt, ist ein Flame Graph, der alle Teile einer Anwendung anzeigt und jeweils farbig markiert, wie hoch die Renderzeit beim letzten Durchlauf war. Das kann sichtbar machen, welche Teile einer Anwendung zu Problemen mit dem Rendering führen.

Zu den weiteren neuen Features gehört der Support für auxclick. Mit auxclick kann eine sekundäre Aktion für das Anklicken von Elementen in einem User Interface definiert werden, die ausgelöst wird, wenn eine alternative Klick-Art ausgeführt wird. So kann, wie im MDN-Beispiel auf GitHub zu sehen ist, eine Aktion durch den Linksklick ausgelöst werden, eine andere durch den Rechtsklick. Das Element wird laut „Can I use“ derzeit von Firefox und Chrome, sowie den mobilen Browsern Chrome for Android, UC Browser for Android und Samsung Internet in mindestens den aktuellen Versionen unterstützt. Safari, der Internet Explorer und Edge unterstützen auxclick bislang nicht.

Weitere Neuerungen an React 16.5

Den Mouse Events wurden in React 16.5 movementX und movementY hinzugefügt, zwei Neuerungen, die in der Pointer Lock 2.0 Spezifikation des W3C beschrieben sind. Außerdem unterstützt React 16.5 nun auch tangentialPressure und twist Felder bei SyntheticPointerEvent.

Informationen zu weiteren neuen Feautres und den zahlreichen Bugfixes, die an React 16.5 vorgenommen wurden, geben die Release Notes auf GitHub.