Tenho dúvida se vale a pena usar o framework MUI. Os componentes são compostos por muitas tags e dezenas de classes CSS.
Um simples botão tem 11classes CSS. Só o atributo class tem quase 300bytes!!!!
Fico pensando na compilação disto. Se esta carga aparece apenas uma vez como modelo para todos botões tz isto seja aceitável.
Mas se isto é para cada botão, exemplo 50 botões x 300bytes = 1.500bytes, fica inaceitável.
agradeço qq informação, obrigado
Opa Reinaldo, tudo certo?
Quanto à utilização do Material-UI (MUI), a decisão realmente depende das necessidades específicas do seu projeto. Se a busca é por uma consistência visual e um conjunto sólido de componentes, o MUI certamente oferece uma ótima solução.
No que diz respeito à preocupação sobre o impacto das classes no desempenho da aplicação, é válido mencionar que o MUI utiliza um sistema de classes para estilização dos componentes. Podendo ser otimizado com métodos como Tree Shaking e Theme provider.
O "Tree Shaking" concentra-se em importar apenas os componentes que você efetivamente utiliza, removendo o código não utilizado e reduzindo o tamanho total do pacote. Por sua vez, o "Theme Provider" permite personalizar o tema global dos componentes, possibilitando uma estilização padronizada.
Deixo abaixo como recomendação a documentação dos mesmos em inglês:
Além disso, é importante considerar que, em muitos casos, as classes do MUI podem ser reutilizadas e compartilhadas entre diferentes componentes. Isso contribui para a eficiência na escrita do código e na manutenção a longo prazo.
Fico à disposição.
Tenha um bom dia e bons estudos.
Olá Gabriel,
Informações muito interessantes, mas não respondeu a minha dúvida. Minha dúvida tem muito haver com a forma que o código react é compilado. Vou tentar explicar melhor a dúvida.
Continuo com o exemplo do botão. O componente <Button /> é implementado uma única vez. Entretando ao longo da aplicação ele é utilizado diversas vezes. Por exemplo, numa única página ele pode ser utilizado 3 vezes.
Opção 1) Na aplicação o componente <Button /> foi utilizado 50 vezes. Então, códigos html, css e/ou javascript é replicado 50 vezes quando gera o arquivo de "Build"
Opção 2) É utilizado o conceito de instanciação da POO. Os códigos html, css e/ou javascript aparece no arquivo "build" apenas uma vez, e nas 50 utilizações ele apenas é "instanciado dinâmicamente".
Eu penso que a lógica é a opção 2, mas gostaria confirmar.
Opa Reinaldo.
Está correto em sua segunda afirmação. Quando você utiliza o mesmo componente várias vezes no código, como no exemplo que você deu, o React não cria cópias separadas do código para cada instância do componente.
Ao criar um componente no React, estamos desenvolvendo uma classe ou função que encapsula tanto o comportamento quanto a renderização de um botão. Assim, quando esse componente é empregado em diferentes partes da aplicação, não ocorre uma replicação exaustiva. Em vez disso, ocorre uma renderização dinâmica sempre que o componente é referenciado.
Fico à disposição.
Obrigado