O autor do material, cuja tradução publicamos hoje, deseja apresentar a versão beta da biblioteca de componentes estilizados v4 à comunidade de desenvolvedores da web. Ele, falando em nome dos criadores da biblioteca, diz que os componentes com estilo agora têm uma nova API global para trabalhar com estilos e suporte nativo às propriedades as e
ref . A biblioteca seguiu o caminho de rejeitar o
.extend , é compatível com o StrictMode React v16 e tornou-se melhor, mais rápida e mais poderosa.
Possui componentes com estilo v4
Para instalar a versão mais recente dos componentes denominados, use este comando:
npm install styled-components@beta
Você pode se familiarizar com os recursos da biblioteca, verificá-los e, se algo precisar ser aprimorado, informe os desenvolvedores.
Aqui você pode encontrar instruções sobre como atualizar para uma nova versão da biblioteca.
Aqui está o registro de alterações dos componentes com estilo v4.0.0-beta.0.
Considere os principais recursos desta versão de componentes com estilo:
- Reduzindo tamanho e aumentando a velocidade. O tamanho da biblioteca foi reduzido de 16,1 KB para menos de 15 KB (seu tamanho final depende do seu bundler e do uso do plug-in babel). A velocidade de montagem aumentou em cerca de 25%, a velocidade de re-renderização - em cerca de 7,5%.
- Nova API
createGlobalStyle , que substitui a antiga API injectGlobal com suporte para recarga e temas quentes. - Suporte para a propriedade as, uma alternativa mais flexível para
.withComponent() .
- Livrar-se do
Comp.extend com suporte para tradução automática da base de código em um formato de styled(Comp) unificado styled(Comp) . - Total compatibilidade com o StrictMode React v16. Além disso, isso significa que os desenvolvedores tiveram que abandonar o suporte ao React v15 e outras versões mais antigas do React (embora os polyfills provavelmente possam ser usados para organizar o trabalho com os componentes denominados v4 no React v15).
- Suporte nativo para
ref para quaisquer componentes estilizados e, graças ao React v16, não há necessidade de usar innerRef .
A biblioteca de componentes com estilo é lançada na versão beta, para que aqueles que a usam tenham tempo suficiente para testar as alterações com estresse e para que seja possível preparar mecanismos auxiliares, como descrições de tipos e ferramentas de destaque de sintaxe para novas API Espera-se que a biblioteca permaneça no status beta por cerca de um mês.
Desempenho
Quando a segunda versão dos componentes com estilo foi lançada, prometemos, depois de finalizar as APIs principais, focar no desempenho. Desde então, graças aos patches, melhoramos o desempenho da biblioteca, o que, em particular, levou a um aumento de
10 vezes no desempenho na v3.1.
O trabalho no desempenho de componentes com estilo continua. Graças às otimizações internas relacionadas ao trabalho com memória, devido às peculiaridades da implementação do mecanismo JS e da refatoração de código, a velocidade de montagem dos componentes denominados v4 para árvores de componentes profundas e amplas aumentou cerca de 25%. As atualizações dinâmicas de estilo são cerca de 7% mais rápidas. Aqui está uma comparação do desempenho dos componentes denominados v3 e v4, com base nos resultados de três testes. Os dois primeiros estão relacionados ao estudo da montagem de árvores de componentes, o terceiro refere-se à atualização de componentes com estilos dinâmicos.
Comparação de desempenho de componentes com estilo v3 e v4Esses resultados, obtidos em um ambiente isolado, parecem impressionantes. No entanto, será bastante interessante comparar os componentes com estilo v4 com outras bibliotecas de ecossistema CSS-in-JS, em particular em termos de velocidade de montagem.
Comparação de desempenho de componentes com estilo v4 e outras bibliotecasComo você pode ver, o desempenho dos componentes estilizados parece muito impressionante. Em particular, em comparação com as bibliotecas mais rápidas, os resultados dos componentes com estilo estão dentro do desvio padrão em relação aos resultados em termos de velocidade de montagem e atualização. Tudo isso nos permite declarar oficialmente que o desempenho não é mais um problema desta biblioteca.
Embora o desempenho dos componentes com estilo seja o resultado do desenvolvimento da biblioteca e de um tempo e esforço consideráveis para aprimorá-lo, isso não significa que não estaremos mais envolvidos em melhorias de desempenho. Se encontrarmos uma oportunidade para tornar a biblioteca ainda mais rápida, usaremos essa oportunidade.
Nova API de estilo global
Estamos desenvolvendo uma nova API de estilo global há algum tempo. A API antiga,
injectGlobal , tem três inconvenientes sérios: não suporta atualização dinâmica, recarregamento a quente e uso contextual de temas.
Agora, temos o prazer de apresentar você a
createGlobalStyle , a nova API de estilo global que oferece suporte à atualização dinâmica. Aqui está como é trabalhar com ele:
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 os estilos globais agora fazem parte da árvore de componentes do React. Embora, à primeira vista, não haja nada de especial nisso, torna possível atualizar dinamicamente e recarregar estilos de forma dinâmica, além de permitir o uso de
temas contextuais para estilos globais. Tudo parece exatamente o mesmo que quando se trabalha com outros componentes estilizados.
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> ); }
Recusa de extensão e "dobragem" de componentes
Esta versão dos componentes estilizados possui um mecanismo interno, graças ao qual os componentes estilizados nos invólucros agora são automaticamente "recolhidos", o que permite renderizar apenas um componente.
O que isso significa para os usuários da biblioteca? O fato é que a API
StyledComp.extend apareceu na biblioteca para permitir algumas otimizações com base no fato de que componentes extensíveis eram componentes estilizados. Graças ao trabalho interno sobre a "dobra" automática de componentes, ao usar o
styled(StyledComp) as mesmas otimizações que foram aplicadas graças ao
StyledComp.extend são automaticamente aplicadas. Isso significa que
.extend agora não é particularmente útil, o que permitiu abandonar essa API. Como resultado, agora os usuários da biblioteca podem escrever menos código e ter a oportunidade de não perder tempo desenvolvendo uma API adicional. Acreditamos que isso é muito bom.
Propriedade polimórfica como
Há outro novo recurso denominado componentes v4, do qual estamos muito entusiasmados. Estamos falando de suporte nativo à propriedade as para qualquer componente estilizado, o que nos permite influenciar dinamicamente a renderização durante a execução do programa. Considere um exemplo:
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>
Se você comparar isso com o mecanismo
.withComponent(something) existente, a nova ferramenta será mais flexível, pois você não precisará descrever a substituição antecipadamente e, graças ao novo mecanismo interno de "dobragem", a estilização não será perdida se o componente base for estilizado. componente!
import styled from "styled-components" const RedColor = styled.div` color: red; ` const BlueBackgroundRedColor = styled(RedColor)` background: blue; ` <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor>
Como você pode ver, a propriedade as é apenas uma coisa impressionante, o que simplifica bastante a renderização do código HTML semântico em qualquer lugar do aplicativo. A "sopa" das tags
<div> não tem mais nada para justificar.
Observe que, até garantirmos que a propriedade as possa se tornar um substituto adequado para
.withComponent em todos os casos de uso, não a recusaremos. Supõe-se que esse período de transição não dure muito tempo e, no próximo grande lançamento, removeremos
.withComponent .
Reagir v16 e ref
No processo de mudança para a API do React v16, descobrimos, entre outras coisas, que, graças à nova API do
React.forwardRef , podemos nos livrar do
innerRef . Nunca gostamos particularmente dessa técnica, pois parecia algum tipo de truque não tão limpo. Mas, graças ao excelente trabalho da equipe React, agora você pode usar a
ref nativa:
import styled from "styled-components" const Component = styled.div` color: red; `
Aprimoramentos para gravadores TypeScript
Não fazemos isso diretamente, mas gostamos muito do novo
@ babel / preset-typescript . Sua existência significa que agora todos que escrevem no TypeScript finalmente poderão usar o
plug -
in babel para componentes estilizados com todas as suas utilidades, incluindo depuração simplificada usando nomes de componentes em classes, suporte para renderização de servidor e redução do tamanho de pacotes.
Além disso, concluímos a tradução dos tipos TS em DefinitelyTyped. A comunidade agora pode trabalhar com eles e corrigir erros de digitação no seu próprio ritmo, sem estar vinculada a liberações de componentes com estilo. As declarações de tipo podem ser encontradas
aqui .
Sumário
Com este material, você aprendeu sobre os novos recursos beta dos componentes de estilo v4 e as melhorias feitas nele. Esperamos que tudo isso seja útil para aqueles que usam componentes com estilo e talvez seja interessante para aqueles que apenas tentarão esta biblioteca.
Caros leitores! Você usa a biblioteca de componentes com estilo em seus projetos?
