Besser, schneller, leistungsfähiger: Styled-Components v4

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, möchte der Webentwickler-Community die Beta-Version der v4-Bibliothek von styled-components vorstellen. Er spricht im Namen der Ersteller der Bibliothek und sagt, dass styled-components jetzt eine neue globale API für die Arbeit mit Stilen und native Unterstützung für ref und ref Eigenschaften hat. Die Bibliothek hat den Weg der Ablehnung von .extend . Sie ist mit StrictMode React v16 kompatibel und besser, schneller und leistungsfähiger geworden.

Features Styled-Komponenten v4

Verwenden Sie diesen Befehl, um die neueste Version der gestalteten Komponenten zu installieren:

 npm install styled-components@beta 

Sie können sich mit den Funktionen der Bibliothek vertraut machen, sie überprüfen und die Entwickler darüber informieren, wenn sich herausstellt, dass etwas verbessert werden muss. Hier finden Sie Anweisungen zum Upgrade auf eine neue Version der Bibliothek. Hier ist das Änderungsprotokoll für gestaltete Komponenten v4.0.0-beta.0.

Berücksichtigen Sie die Hauptmerkmale dieser Version mit gestalteten Komponenten:

• Größe reduzieren und Geschwindigkeit erhöhen. Die Bibliotheksgröße wurde von 16,1 KB auf weniger als 15 KB reduziert (die endgültige Größe hängt von Ihrem Bundler und der Verwendung des Babel-Plugins ab). Die Montagegeschwindigkeit wurde um ca. 25% erhöht, die Geschwindigkeit beim erneuten Rendern um ca. 7,5%.
• Die neue createGlobalStyle API, die die alte injectGlobal API ersetzt und Hot- injectGlobal und Themes unterstützt.
• Unterstützung für die as Eigenschaft, eine flexiblere Alternative zu .withComponent() .
  
• Comp.extend von Comp.extend mit Unterstützung für die automatische Übersetzung der Codebasis in ein einheitliches Format styled(Comp) .
• Volle Kompatibilität mit StrictMode React v16. Dies bedeutet außerdem, dass Entwickler die Unterstützung für React v15 und andere ältere Versionen von React aufgeben mussten (obwohl Polyfills wahrscheinlich verwendet werden können, um die Arbeit mit gestalteten Komponenten v4 in React v15 zu organisieren).
• Native Unterstützung für ref für stilisierte Komponenten. Dank React v16 muss innerRef nicht verwendet innerRef .

Die Styled-Components-Bibliothek wird in der Beta-Version veröffentlicht, damit diejenigen, die sie verwenden, genügend Zeit haben, um die Änderungen einem Stresstest zu unterziehen, und um zusätzliche Mechanismen wie Typbeschreibungen und Tools zur Hervorhebung der Syntax für neue vorzubereiten API Die Bibliothek wird voraussichtlich etwa einen Monat im Beta-Status bleiben.

Leistung

Als die zweite Version von Styled-Components veröffentlicht wurde, haben wir versprochen, uns nach Fertigstellung der Kern-APIs auf die Leistung zu konzentrieren. Seitdem haben wir dank Patches die Leistung der Bibliothek verbessert, was insbesondere zu einer 10-fachen Leistungssteigerung in Version 3.1 geführt hat.

Die Arbeit an der Leistung von gestalteten Komponenten wird fortgesetzt. Dank interner Optimierungen im Zusammenhang mit der Arbeit mit dem Speicher konnte aufgrund der Besonderheiten der Implementierung der JS-Engine und des Code-Refactorings die Einbaugeschwindigkeit von styled-components v4 sowohl für tiefe als auch für breite Komponentenbäume um etwa 25% erhöht werden. Dynamische Stilaktualisierungen sind etwa 7% schneller. Hier ist ein Vergleich der Leistung der gestalteten Komponenten v3 und v4, basierend auf den Ergebnissen von drei Tests. Die ersten beiden beziehen sich auf die Untersuchung der Montage von Komponentenbäumen, die dritte auf die Aktualisierung von Komponenten mit dynamischen Stilen.


Leistungsvergleich der Styled-Components v3 und v4

Diese Ergebnisse, die in einer isolierten Umgebung erzielt wurden, sehen beeindruckend aus. Es wird jedoch sehr interessant sein, gestaltete Komponenten v4 mit anderen CSS-in-JS-Ökosystembibliotheken zu vergleichen, insbesondere im Hinblick auf die Einbaugeschwindigkeit.


Vergleich der Leistung von Styled-Components v4 und anderen Bibliotheken

Wie Sie sehen können, sieht die Leistung von gestalteten Komponenten sehr beeindruckend aus. Insbesondere im Vergleich zu den schnellsten Bibliotheken liegen die Ergebnisse der gestalteten Komponenten innerhalb der Standardabweichung von ihren Ergebnissen hinsichtlich der Montage- und Aktualisierungsgeschwindigkeit. All dies ermöglicht es uns, offiziell zu erklären, dass die Leistung kein Problem dieser Bibliothek mehr ist.

Obwohl die Leistung von gestalteten Komponenten das Ergebnis der Entwicklung der Bibliothek und des erheblichen Zeit- und Arbeitsaufwands für deren Verbesserung ist, bedeutet dies nicht, dass wir uns nicht mehr mit Leistungsverbesserungen befassen werden. Wenn wir eine Gelegenheit finden, die Bibliothek noch schneller zu machen, werden wir diese Gelegenheit nutzen.

Neue globale Styling-API

Wir entwickeln seit einiger Zeit eine neue globale Styling-API. Die alte API, injectGlobal , weist drei schwerwiegende Nachteile auf: Sie unterstützt keine dynamische Aktualisierung, kein Hot- injectGlobal und keine kontextbezogene Verwendung von Themen.

Jetzt freuen wir uns, Ihnen createGlobalStyle vorstellen zu createGlobalStyle , die neue globale Styling-API, die dynamische Aktualisierungen unterstützt. So sieht die Arbeit mit ihm aus:

 import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html {   color: red; } `; export default function App() { return (   <div>     <GlobalStyle />     This is my app!   </div> ); } 

Mit createGlobalStyle globale Stile jetzt Teil des React-Komponentenbaums. Obwohl dies auf den ersten Blick nichts Besonderes ist, können Sie Stile dynamisch aktualisieren und im laufenden Betrieb neu laden und kontextbezogene Themen für globale Stile verwenden. Es sieht alles genauso aus wie bei der Arbeit mit anderen stilisierten Komponenten.

 import { createGlobalStyle, ThemeProvider } from "styled-components"; //  ,       const GlobalStyle = createGlobalStyle` html {   background: ${p => p.backgroundColor}   color: red;   font-family: ${p => p.theme.fontFamily}; } `; export default function App() { return (   <ThemeProvider theme={{ fontFamily: "Helvetica Neue" }}>     <GlobalStyle backgroundColor="turquoise" />   </ThemeProvider> ); } 

Verweigerung der Erweiterung und "Faltung" von Bauteilen

Diese Version von gestylten Komponenten verfügt über einen internen Mechanismus, dank dessen stilisierte Komponenten in Wrappern jetzt automatisch "reduziert" werden, sodass nur eine Komponente gerendert werden kann.

Was bedeutet das für Bibliotheksbenutzer? Tatsache ist, dass die StyledComp.extend API in der Bibliothek StyledComp.extend , um einige Optimierungen aufgrund der Tatsache zu ermöglichen, dass erweiterbare Komponenten stilisierte Komponenten waren. Dank der internen Arbeit am automatischen „Falten“ von Komponenten bei Verwendung von styled(StyledComp) werden automatisch dieselben Optimierungen angewendet, die dank StyledComp.extend angewendet wurden. Dies bedeutet, dass .extend jetzt nicht besonders nützlich ist, wodurch diese API aufgegeben werden konnte. Infolgedessen können Bibliotheksbenutzer jetzt weniger Code schreiben und haben die Möglichkeit, keine Zeit mit der Entwicklung einer zusätzlichen API zu verschwenden. Wir glauben, dass das sehr gut ist.

Polymorphe Eigenschaft als

Es gibt eine weitere neue Funktion im Stil von Komponenten v4, von der wir sehr begeistert sind. Wir sprechen über die native Unterstützung der as Eigenschaft für alle stilisierten Komponenten, die es uns ermöglicht, das Rendering während der Programmausführung dynamisch zu beeinflussen. Betrachten Sie ein Beispiel:

 import styled from "styled-components" import { Link } from "react-router-dom" // <Component />   DOM  div const Component = styled.div` color: red; ` <Component>Hello World!</Component> //     ,      HTML-  ! <Component as="span">Hello World!</Component> <Component as={Link} to="home">Hello World!</Component> 

Wenn Sie dies mit dem vorhandenen .withComponent(something) Mechanismus .withComponent(something) , ist das neue Tool flexibler, da Sie den Austausch nicht im Voraus beschreiben müssen. Dank des neuen internen Faltmechanismus geht die Stilisierung nicht verloren, wenn die Basiskomponente gestylt wird. Komponente!

 import styled from "styled-components" const RedColor = styled.div` color: red; ` const BlueBackgroundRedColor = styled(RedColor)` background: blue; ` <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor> //       `span`   // <RedColor />,       // !! (.withComponent    ) 

Wie Sie sehen können, ist die as Eigenschaft einfach eine großartige Sache, die das Rendern von semantischem HTML-Code überall in der Anwendung erheblich vereinfacht. Die "Suppe" der <div> -Tags hat nichts mehr zu rechtfertigen.

Bitte beachten Sie, dass wir es nicht ablehnen, bis wir sicherstellen, dass die as Eigenschaft in allen Anwendungsfällen ein geeigneter Ersatz für .withComponent wird. Es wird davon ausgegangen, dass diese Übergangszeit nicht zu lange .withComponent , und wir werden in der nächsten Hauptversion .withComponent entfernen.

Reagiere auf v16 und ref

Beim Wechsel zur React v16-API haben wir unter anderem festgestellt, dass wir dank der neuen React.forwardRef API React.forwardRef innerRef . Wir haben diese Technik nie besonders gemocht, da sie wie eine Art nicht so sauberer Hack aussah. Dank der hervorragenden Arbeit des React-Teams können Sie jetzt die native ref :

 import styled from "styled-components" const Component = styled.div` color: red; ` //    render <Component ref={element => { this.myRef = element; }} 

Verbesserungen für TypeScript Writers

Wir machen das nicht direkt, aber wir mögen das neue @ babel / preset-Typoskript wirklich. Aufgrund seiner Existenz kann nun jeder, der über TypeScript schreibt, das Babel- Plugin endlich für gestaltete Komponenten mit all seinen Nützlichkeiten verwenden, einschließlich vereinfachtem Debuggen mit Komponentennamen in Klassen, Unterstützung für das Rendern von Servern und Reduzieren der Größe von Bundles.

Darüber hinaus haben wir die Übersetzung von TS-Typen in DefinitelyTyped abgeschlossen. Die Community kann jetzt mit ihnen arbeiten und Tippfehler in ihrem eigenen Tempo beheben, ohne an Versionen mit gestalteten Komponenten gebunden zu sein. Typdeklarationen finden Sie hier .

Zusammenfassung

In diesem Material haben Sie die neuen Beta-Funktionen von styled-components v4 und die daran vorgenommenen Verbesserungen kennengelernt. Wir hoffen, dass all dies für diejenigen nützlich sein wird, die gestaltete Komponenten verwenden, und vielleicht wird es für diejenigen interessant sein, die diese Bibliothek nur ausprobieren werden.

Liebe Leser! Verwenden Sie in Ihren Projekten eine Bibliothek mit gestalteten Komponenten?