L'auteur du matériel, dont nous publions la traduction aujourd'hui, souhaite présenter la version bêta de la bibliothèque de composants de style v4 à la communauté des développeurs Web. Il, s'exprimant au nom des créateurs de la bibliothèque, dit que les composants de style ont désormais une nouvelle API globale pour travailler avec les styles et la prise en charge native des propriétés
as et
ref . La bibliothèque a suivi le chemin du rejet de
.extend , elle est compatible avec StrictMode React v16 et est devenue meilleure, plus rapide et plus puissante.
Caractéristiques des composants de style v4
Afin d'installer la dernière version des composants stylisés, utilisez cette commande:
npm install styled-components@beta
Vous pouvez vous familiariser avec les capacités de la bibliothèque, les vérifier et s'il s'avère que quelque chose doit être amélioré, informez-en les développeurs. Vous trouverez ici des instructions sur la mise à niveau vers une nouvelle version de la bibliothèque.
Voici le journal des modifications pour les composants de style v4.0.0-beta.0.
Considérez les principales caractéristiques de cette version de composants de style:
- Réduction de la taille et augmentation de la vitesse. La taille de la bibliothèque a été réduite de 16,1 Ko à moins de 15 Ko (sa taille finale dépend de votre bundler et de l'utilisation du plugin babel). La vitesse de montage a augmenté d'environ 25%, la vitesse de restitution - d'environ 7,5%.
- La nouvelle API
createGlobalStyle , qui remplace l'ancienne API injectGlobal avec prise en charge du rechargement à chaud et des thèmes. - Prise en charge de la propriété
as , une alternative plus flexible à .withComponent() .
Comp.extend de Comp.extend avec prise en charge de la traduction automatique de la base de code dans un format de styled(Comp) unifié styled(Comp) .- Compatibilité totale avec StrictMode React v16. Cela signifie en outre que les développeurs ont dû abandonner la prise en charge de React v15 et d'autres versions plus anciennes de React (bien que les polyfills puissent probablement être utilisés pour organiser le travail avec les composants de style v4 dans React v15).
- Prise en charge native de
ref pour tous les composants stylisés, et grâce à React v16, il n'est pas nécessaire d'utiliser innerRef .
La bibliothèque de composants de style est publiée en version bêta afin que ceux qui l'utilisent aient suffisamment de temps pour tester les modifications sous contrainte et qu'il soit possible de préparer des mécanismes auxiliaires tels que des descriptions de type et des outils de mise en évidence de la syntaxe pour les nouveaux API La bibliothèque devrait rester en version bêta pendant environ un mois.
Performances
Lorsque la deuxième version des composants de style a été publiée, nous avons promis, après avoir finalisé les API principales, de nous concentrer sur les performances. Depuis lors, grâce aux correctifs, nous avons amélioré les performances de la bibliothèque, ce qui a notamment permis de
multiplier par
10 les performances de la v3.1.
Les travaux sur les performances des composants de style se poursuivent. Grâce aux optimisations internes liées au travail avec la mémoire, en raison des particularités de la mise en œuvre du moteur JS et du refactoring de code, la vitesse de montage des composants de style v4 pour les arborescences de composants profondes et larges a augmenté d'environ 25%. Les mises à jour de style dynamique sont environ 7% plus rapides. Voici une comparaison des performances des composants de style v3 et v4, basée sur les résultats de trois tests. Les deux premiers sont liés à l'étude du montage des arborescences de composants, le troisième concerne la mise à jour des composants avec des styles dynamiques.
Comparaison des performances des composants stylisés v3 et v4Ces résultats, obtenus dans un environnement isolé, semblent impressionnants. Cependant, il sera assez intéressant de comparer les composants de style v4 avec d'autres bibliothèques de l'écosystème CSS-in-JS, en particulier, en termes de vitesse de montage.
Comparaison des performances des composants stylisés v4 et d'autres bibliothèquesComme vous pouvez le voir, les performances des composants de style semblent très impressionnantes. En particulier, par rapport aux bibliothèques les plus rapides, les résultats des composants stylisés sont dans l'écart standard de leurs résultats en termes de vitesse de montage et de mise à jour. Tout cela nous permet de déclarer officiellement que les performances ne sont plus un problème pour cette bibliothèque.
Bien que les performances des composants de style soient le résultat du développement de la bibliothèque et du temps et des efforts considérables nécessaires pour l'améliorer, cela ne signifie pas que nous ne nous engagerons plus dans l'amélioration des performances. Si nous trouvons une opportunité de rendre la bibliothèque encore plus rapide, nous utiliserons cette opportunité.
Nouvelle API de style globale
Nous développons une nouvelle API de style globale depuis un certain temps. L'ancienne API,
injectGlobal , présente trois inconvénients graves: elle ne prend pas en charge la mise à jour dynamique, le rechargement à chaud et l'utilisation contextuelle des thèmes.
Nous sommes maintenant heureux de vous présenter
createGlobalStyle , la nouvelle API de style globale qui prend en charge la mise à jour dynamique. Voici à quoi ressemble le travail avec lui:
import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html { color: red; } `; export default function App() { return ( <div> <GlobalStyle /> This is my app! </div> ); }
À l'aide de
createGlobalStyle les styles globaux font désormais partie de l'arborescence des composants React. Bien qu'à première vue, il n'y ait rien de spécial à ce sujet, il permet de mettre à jour et de recharger dynamiquement les styles, et vous permet également d'utiliser
des thèmes contextuels pour les styles globaux. Tout a exactement la même apparence que lorsque vous travaillez avec d'autres composants stylisés.
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> ); }
Refus de .extend et "pliage" des composants
Cette version de composants stylisés dispose d'un mécanisme interne, grâce auquel les composants stylisés dans les wrappers sont désormais automatiquement «réduits», ce qui permet de rendre un seul composant.
Qu'est-ce que cela signifie pour les utilisateurs de la bibliothèque? Le fait est que l'API
StyledComp.extend est apparue dans la bibliothèque afin de permettre certaines optimisations basées sur le fait que les composants extensibles étaient des composants stylisés. Grâce au travail interne sur le «pliage» automatique des composants, lors de l'utilisation de
styled(StyledComp) les mêmes optimisations qui ont été appliquées grâce à
StyledComp.extend sont automatiquement appliquées. Cela signifie que
.extend désormais plus particulièrement utile, ce qui a permis d'abandonner cette API. En conséquence, les utilisateurs de bibliothèque peuvent désormais écrire moins de code et avoir la possibilité de ne pas perdre de temps à développer une API supplémentaire. Nous pensons que c'est très bien.
Propriété polymorphe comme
Il existe une autre nouvelle fonctionnalité, les composants de style v4, dont nous sommes très enthousiastes. Nous parlons de la prise en charge native de la propriété
as pour tous les composants stylisés, ce qui nous permet d'influencer dynamiquement le rendu lors de l'exécution du programme. Prenons un exemple:
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>
Si vous comparez cela avec le
.withComponent(something) existant, le nouvel outil est plus flexible, car vous n'avez pas besoin de décrire le remplacement à l'avance, et, grâce au nouveau mécanisme de «pliage» interne, la stylisation n'est pas perdue si le composant de base est stylé - composant!
import styled from "styled-components" const RedColor = styled.div` color: red; ` const BlueBackgroundRedColor = styled(RedColor)` background: blue; ` <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor>
Comme vous pouvez le voir, la propriété
as est tout simplement géniale, ce qui simplifie considérablement le rendu du code HTML sémantique n'importe où dans l'application. La "soupe" des balises
<div> n'a plus rien à justifier.
Veuillez noter que jusqu'à ce que nous nous
.withComponent que la propriété
as puisse devenir un remplacement approprié pour
.withComponent dans tous les cas d'utilisation, nous ne le refuserons pas. On suppose que cette période de transition ne durera pas trop longtemps, et nous, dans la prochaine version majeure, supprimerons
.withComponent .
React v16 et ref
Lors du passage à l'API React v16, nous avons constaté, entre autres, que grâce à la nouvelle API
React.forwardRef , nous pouvons nous débarrasser de
innerRef . Nous n'avons jamais particulièrement aimé cette technique, car elle ressemblait à une sorte de hack pas si propre. Mais grâce à l'excellent travail de l'équipe React, vous pouvez désormais utiliser la
ref native:
import styled from "styled-components" const Component = styled.div` color: red; `
Améliorations pour les écrivains TypeScript
Nous ne le faisons pas directement, mais nous aimons vraiment le nouveau
@ babel / preset-typescript . Son existence signifie que maintenant tous ceux qui écrivent sur TypeScript pourront enfin utiliser le
plugin babel pour les composants de style avec toutes ses utilités, y compris le débogage simplifié en utilisant les noms de composants dans les classes, la prise en charge du rendu du serveur et la réduction de la taille des bundles.
De plus, nous avons terminé la traduction des types TS en DefinitelyTyped. La communauté peut désormais travailler avec eux et corriger les erreurs de frappe à son propre rythme, sans être liée à des versions de composants de style. Les déclarations de type peuvent être trouvées
ici .
Résumé
À partir de ce matériel, vous avez découvert les nouvelles fonctionnalités bêta des composants de style v4 et les améliorations qui y ont été apportées. Nous espérons que tout cela sera utile à ceux qui utilisent des composants de style, et peut-être que cela sera intéressant pour ceux qui vont simplement essayer cette bibliothèque.
Chers lecteurs! Utilisez-vous une bibliothèque de composants de style dans vos projets?
