CCS-in-JavaScript

styled-components: Version 5.0 der JavaScript Library erschienen
Keine Kommentare

styled-components v5.0 wurde veröffentlicht. Die React-Library kann dank des Updates bei einer kleineren Bundle-Größe schnelleres Server-side Rendering und Client-Side-Mounting aufweisen. Breaking Changes wurden hingegen nicht vorgenommen.

styled-components v5.0 ist da. Die Library für CSS-Stile in JavaScript für React wird mit dem neuen Major Releases laut den Entwicklern schneller und soll dank Hooks ein weniger umfangreicheren Code in den React DevTools erzeugen. Gegeben ist außerdem eine Abwährtskompatibilität, da auf Breaking Changes verzichtet wurde.

styled-components v5.0: Das ist neu

Im Kern der v5.0 steht die Performance-Verbesserung. Laut Entwickler Evan Jacobs konnte die Bundle-Größe um 19% reduziert werden, während das Client-Side-Mounting um 18% schneller arbeiten soll. Eine Geschwindigkeitsverbesserung von sogar 45% wird für das Server-Side-Rendering angegeben, das Aktualisieren der Dynamic Styles soll um rund 17% effektiver geworden sein. Möglich wurden diese Leistungssteigerungen durch die vollständig neu aufgebaute Core Stylesheet Engine.

Auf Seiten der React DevTools ist aufgrund von verwendeten Hooks weniger Component Nesting nötig, was den Code in den DevTools übersichtlicher zeigt, wenn styled-components verwendet wird. Im Blog-Artikel zum neuen Major Release findet sich dafür folgendes Beispiel von Entwickler Jacobs:

Beispiel einer bisherigen TagLine -Komponente in den React DevTools:

 
<TagLine>
  <StyledComponent forwardedRef={null}>
    <Context.Consumer>
      <Context.Consumer>
        <h2 className=”H2-sc-1izft7s-7”>Hello world</h2>
      </Context.Consumer>
    </Context.Consumer>
  </StyledComponent>
</TagLine>

Die gleiche Komponente, unter der Verwendung von styled-components v5.0, sieht mit dem Einsatz von Hooks wie folgt aus:

 
<TagLine>
<h2 className=”H2-sc-1izft7s-7”>Hello world</h2>
</TagLine>

Eine weitere Neuerung hat der <StyleSheetManager /> erhalten, sodass der CSS Parser nun durch Plug-ins erweiterbar ist. Dieses neues Feature ermöglichte es den Entwicklern auch, einen Register Transfer Level Support zu implementieren, der wie folgt angewendet werden kann:

 
import { StyleSheetManager } from 'styled-components';
import stylisRTLPlugin from 'stylis-plugin-rtl';

<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
  <App />
</StyleSheetManager>

Die Version 5.0 enthält keine Breaking Changes, lediglich die aktuellste Version von React wird benötigt, um die Library zu verwenden. Installiert werden kann styled-components mittels:

 
npm install styled-components@^5.0.0

Alle Informationen zur neuen Version von styled-components finden sich auf GitHub und im offiziellen Blog-Artikel.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -