Componentes em React Native

Tempo de leitura: 6 minutos
Desenvolvimento de Software
por em 5 de novembro de 2020

Legibilidade, facilidade no entendimento, reaproveitamento e suscetibilidade a mudanças. Essas são quatro características dos componentes em React Native que os tornam grandes aliados no desenvolvimento. Eles permitem a divisão da interface do usuário (UI) em partes independentes, ou seja, cada parte da aplicação torna-se um bloco isolado livre de outras dependências externas.

“Se, por exemplo, é preciso alterar a cor de um grupo de botões na interface da plataforma ou aplicativo, e não há nenhum componente no projeto, será preciso modificar um a um manualmente ou utilizar o Visual Studio. Por outro lado, em um projeto componentizado, basta alterar esse componente para que todo o projeto seja atualizado”, explicou o trainee Felipe Fernandes Bastos, que aproveitou o momento do SoftDrops para falar aos colegas sobre o tema.

Uso de componentes

Logo no início da apresentação, Felipe lembrou da diferença entre os Componentes Classe e os Componentes Funcionais. Os primeiros são mais antigos, utilizados antes da versão 0.6 do React Native; mas ainda assim são importantes pois, em muitos casos, soluções prontas conterão esses componentes, que possuem uma sintaxe diferente dos mais atuais.

Na figura abaixo é possível entender as principais diferenças – na esquerda vemos os Componentes de Classe, e na direita os Componentes Funcionais:

react_1

Em relação à organização, é possível criar uma pasta de componentes e colocar todos os componentes do projeto dentro dela (imagem da esquerda); ou separar os componentes por contexto (imagem da direita) – a escolha vai de acordo com a preferência de cada um. “No meu caso, eu uso a pasta componentes somente para componentes globais, que serão utilizados em diversas páginas. Já os componentes específicos, eu crio dentro da pasta da própria página, pois prefiro desta forma” salientou o trainee.

react_2

Componente Pronto X Componente Novo

É possível reaproveitar componentes React Native para diferentes projetos, bastando readaptá-los. Para salientar as vantagens e desvantagens dessa prática, Felipe pontuou as diferenças entre componentes prontos e novos.

– Componente pronto: as vantagens incluem a não necessidade de ‘reinventar a roda’, e o menor custo de tempo para a entrega do ‘level 0’; porém nem todos os componentes prontos vão atender as necessidades de regras de negócio e design do projeto; as mudanças são uma incógnita; e o tempo gasto para entender um componente pode ser maior do que o tempo para criar um novo.

– Componente novo: as vantagens incluem o maior controle das mudanças; e o melhor atendimento às necessidades do projeto; porém dependendo da complexidade do componente o esforço para criá-lo será muito maior; e embora tenhamos o controle sobre possíveis mudanças, as mesmas podem se tornar custosas.

Problemas na modificação dos componentes

Em relação à alteração dos componentes, o trainee comentou que na evolução de um projeto, pode haver a solicitação de novas regras de negócios em componentes. Essas mudanças podem impactar futuras modificações, pois o componente torna-se muito complexo e qualquer alteração pode ‘estragar’ o código.

Além disso, dependendo dos recursos que estão sendo utilizados, é preciso atentar para que componentes filhos não mudem estados do componente pai. Isso pode causar um verdadeiro desastre na aplicação. Para exemplificar, Felipe mostrou dois exemplos de alteração de botões – no primeiro, a alteração foi feita de forma mais perigosa, modificando sempre o mesmo botão; no segundo, foram criados dois botões diferentes para evitar problemas.

react_3

Componentes Úteis X Componentes Problemáticos

Antes de terminar sua apresentação, Felipe destacou dois componentes do React Native que são muito importantes e que, na sua opinião, devem ser usados em todos os projetos:

– Styled-componentes: converte o texto CSS em um objeto stylesheet do React Native, o que permite o uso de tags <Container>, e torna o código mais legível;

– React-native-size-matters: ajuda a manter o design do projeto em diversos tamanhos de tela, pois permite a definição de um padrão para redimensionamento.

Além disso, o trainee também falou sobre bibliotecas que julga problemáticas e que, se possível, devem ser evitados:

– RNFetchBlob: biblioteca que tem como objetivo fazer download de um arquivo PDF no aplicativo, porém não funciona. A explicação da lib é confusa, assim como sua configuração básica que gera conflito com outros componentes;

– Integração com Pagar.me: também gerou problemas, pois apresentou conflito com projetos da versão 0.6 do React Native – lembrando que é possível resolver esses conflitos com ‘gambiarras’ que, depois de um tempo, acabam não funcionando mais, então não são indicadas.

Sugestões ou críticas para nosso blog? Entre em contato pelo endereço mkt@softdesign.com.br.