El autor del material, cuya traducción publicamos hoy, quiere presentar la versión beta de la biblioteca v4 de componentes con estilo a la comunidad de desarrolladores web. Él, hablando en nombre de los creadores de la biblioteca, dice que los componentes con estilo ahora tienen una nueva API global para trabajar con estilos y soporte nativo para propiedades
as y
ref . La biblioteca siguió el camino de rechazar
.extend , es compatible con StrictMode React v16 y se ha vuelto mejor, más rápido y más potente.
Características de componentes con estilo v4
Para instalar la última versión de componentes con estilo, use este comando:
npm install styled-components@beta
Puede familiarizarse con las capacidades de la biblioteca, verificarlas y, si resulta que algo necesita mejorar, informe a los desarrolladores al respecto.
Aquí puede encontrar instrucciones sobre cómo actualizar a una nueva versión de la biblioteca.
Aquí está el registro de cambios para los componentes con estilo v4.0.0-beta.0.
Considere las características principales de esta versión de componentes con estilo:
- Reducción de tamaño y aumento de velocidad. El tamaño de la biblioteca se ha reducido de 16.1 KB a menos de 15 KB (su tamaño final depende de su paquete y del uso del complemento babel). La velocidad de montaje aumentó en aproximadamente un 25%, la velocidad de renderizado, en aproximadamente un 7,5%.
- La nueva API
createGlobalStyle , que es un reemplazo de la antigua API injectGlobal con soporte para recarga y temas en caliente. - Soporte para la propiedad
as , una alternativa más flexible a .withComponent() .
- Deshacerse de
Comp.extend con soporte para la traducción automática de la base de código a un formato unificado de styled(Comp) . - Compatibilidad total con StrictMode React v16. Esto, además, significa que los desarrolladores tuvieron que abandonar el soporte para React v15 y otras versiones anteriores de React (aunque los polyfills probablemente se pueden usar para organizar el trabajo con componentes con estilo v4 en React v15).
- Soporte nativo para
ref para cualquier componente estilizado, y gracias a React v16, no hay necesidad de usar innerRef .
La biblioteca de componentes con estilo se lanza en versión beta para que aquellos que la usan tengan tiempo suficiente para hacer una prueba de esfuerzo de los cambios, y para que sea posible preparar mecanismos auxiliares como descripciones de tipos y herramientas de resaltado de sintaxis para nuevos API Se espera que la biblioteca permanezca en estado beta durante aproximadamente un mes.
Rendimiento
Cuando se lanzó la segunda versión de los componentes con estilo, prometimos, después de finalizar las API principales, centrarnos en el rendimiento. Desde entonces, gracias a los parches, hemos mejorado el rendimiento de la biblioteca, lo que, en particular, ha llevado a un aumento de
10 veces en el rendimiento en v3.1.
El trabajo sobre el rendimiento de los componentes con estilo continúa. Gracias a las optimizaciones internas relacionadas con el trabajo con memoria, debido a las peculiaridades de implementar el motor JS y la refactorización de código, la velocidad de montaje de los componentes con estilo v4 para árboles de componentes profundos y anchos aumentó en aproximadamente un 25%. Las actualizaciones de estilo dinámico son aproximadamente un 7% más rápidas. Aquí hay una comparación del rendimiento de los componentes con estilo v3 y v4, basado en los resultados de tres pruebas. Los dos primeros están relacionados con el estudio del montaje de árboles de componentes, el tercero se refiere a la actualización de componentes con estilos dinámicos.
Comparación de rendimiento de componentes con estilo v3 y v4Estos resultados, obtenidos en un entorno aislado, parecen impresionantes. Sin embargo, será bastante interesante comparar los componentes con estilo v4 con otras bibliotecas de ecosistemas CSS-in-JS, en particular, en términos de velocidad de montaje.
Comparación de rendimiento de componentes con estilo v4 y otras bibliotecasComo puede ver, el rendimiento de los componentes con estilo se ve muy impresionante. En particular, en comparación con las bibliotecas más rápidas, los resultados de los componentes con estilo están dentro de la desviación estándar de sus resultados en términos de velocidad de montaje y actualización. Todo esto nos permite declarar oficialmente que el rendimiento ya no es un problema de esta biblioteca.
Aunque el rendimiento de los componentes con estilo es el resultado del desarrollo de la biblioteca y de un tiempo y esfuerzo considerables para mejorarla, esto no significa que ya no participemos en mejoras de rendimiento. Si encontramos una oportunidad para hacer que la biblioteca sea aún más rápida, utilizaremos esta oportunidad.
Nueva API de diseño global
Llevamos bastante tiempo desarrollando una nueva API de diseño global. La antigua API,
injectGlobal , tiene tres inconvenientes serios: no admite actualización dinámica, recarga en caliente y uso contextual de temas.
Ahora nos complace presentarle a
createGlobalStyle , la nueva API de diseño global que admite la actualización dinámica. Así es como se ve trabajar con él:
import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html { color: red; } `; export default function App() { return ( <div> <GlobalStyle /> This is my app! </div> ); }
Usando
createGlobalStyle los estilos globales ahora son parte del árbol de componentes React. Aunque, a primera vista, no hay nada especial en esto, hace posible actualizar dinámicamente y recargar estilos en caliente, y también le permite usar
temas contextuales para estilos globales. Todo se ve exactamente igual que cuando se trabaja con cualquier otro componente estilizado.
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> ); }
Rechazo de extensión y "plegado" de componentes
Esta versión de componentes con estilo tiene un mecanismo interno, gracias al cual los componentes estilizados en envoltorios ahora se "colapsan" automáticamente, lo que permite renderizar solo un componente.
¿Qué significa esto para los usuarios de la biblioteca? El hecho es que la API
StyledComp.extend apareció en la biblioteca para permitir algunas optimizaciones basadas en el hecho de que los componentes extensibles eran componentes estilizados. Gracias al trabajo interno en el "plegado" automático de componentes, cuando se usa
styled(StyledComp) las mismas optimizaciones que se aplicaron gracias a
StyledComp.extend se aplican automáticamente. Esto significa que
.extend ahora no es particularmente útil, lo que permitió abandonar esta API. Como resultado, ahora los usuarios de la biblioteca pueden escribir menos código y tener la oportunidad de no perder el tiempo desarrollando una API adicional. Creemos que esto es muy bueno.
Propiedad polimórfica como
Hay otra nueva característica de componentes con estilo v4, que nos entusiasma mucho. Estamos hablando del soporte nativo para la propiedad
as para cualquier componente estilizado, lo que nos permite influir dinámicamente en el renderizado durante la ejecución del programa. Considere un ejemplo:
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 compara esto con el mecanismo
.withComponent(something) existente, la nueva herramienta es más flexible, ya que no necesita describir el reemplazo por adelantado y, gracias al nuevo mecanismo interno de "plegado", la estilización no se pierde si el componente base está diseñado. componente!
import styled from "styled-components" const RedColor = styled.div` color: red; ` const BlueBackgroundRedColor = styled(RedColor)` background: blue; ` <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor>
Como puede ver, la propiedad
as es simplemente una cosa increíble, que simplifica enormemente la representación del código HTML semántico en cualquier lugar de la aplicación. La "sopa" de las etiquetas
<div> no tiene nada más que justificar.
Tenga en cuenta que hasta que nos aseguremos de que la propiedad
as pueda convertirse en un reemplazo adecuado para
.withComponent en todos los casos de uso, no la rechazaremos. Se supone que este período de transición no durará demasiado, y nosotros, en la próxima versión principal, eliminaremos
.withComponent .
Reaccionar v16 y ref
En el proceso de cambiar a la API React v16, encontramos, entre otras cosas, que gracias a la nueva API
React.forwardRef , podemos deshacernos de
innerRef . Nunca nos gustó especialmente esta técnica, ya que parecía una especie de truco no tan limpio. Pero gracias al excelente trabajo del equipo React, ahora puede usar la
ref nativa:
import styled from "styled-components" const Component = styled.div` color: red; `
Mejoras para escritores TypeScript
No hacemos esto directamente, pero realmente nos gusta el nuevo
@ babel / preset-typescript . Su existencia significa que ahora todos los que escriban en TypeScript finalmente podrán usar el
complemento babel para componentes con estilo con todas sus utilidades, incluida la depuración simplificada usando nombres de componentes en clases, soporte para el procesamiento del servidor y reduciendo el tamaño de los paquetes.
Además, hemos completado la traducción de los tipos de TS a DefinitelyTyped. La comunidad ahora puede trabajar con ellos y corregir los errores de escritura a su propio ritmo, sin estar atados a las versiones de componentes con estilo. Las declaraciones de tipo se pueden encontrar
aquí .
Resumen
De este material, aprendió sobre las nuevas características beta de los componentes con estilo v4 y las mejoras que se le hicieron. Esperamos que todo esto sea útil para aquellos que usan componentes con estilo, y tal vez sea interesante para aquellos que solo van a probar esta biblioteca.
Estimados lectores! ¿Utiliza la biblioteca de componentes con estilo en sus proyectos?
