Como desenvolvedor React ou React Native, é importante entender o conceito de contêiner e componentes de apresentação.
Esses padrões de design ajudam na separação adequada de interesses. Você pode usar esse conceito para garantir que estruturará seu código de maneira mais sustentável e escalável.
O que são componentes de contêiner?
Os componentes de contêiner, também conhecidos como componentes inteligentes, são responsáveis por gerenciar dados e lógica em seu aplicativo. Eles lidam com tarefas como buscar dados de uma API, atualizar o estado e processar as interações do usuário.
Para implementar essa estrutura, você pode usar uma biblioteca como React-Redux para conectar seus componentes à loja e passar dados e ações para seus componentes filhos ou componentes de apresentação.
O que são componentes de apresentação?
Componentes de apresentação são responsáveis por exibir dados de seus componentes pai. Eles geralmente não têm estado e se concentram na interface do usuário e na representação visual dos dados.
Esse estado os torna fáceis de manipular e testar, ganhando o nome de componentes burros. O estado burro dos componentes de apresentação permite reutilizá-los em todo o aplicativo. Isso evita código ruim e repetitivo.
Por que usar contêineres e componentes de apresentação?
A resposta curta e simples para a pergunta é: separação de interesses. Este é um princípio fundamental em vários paradigmas, incluindo programação orientada a objetos, funcional e orientada a aspectos. No entanto, muitos desenvolvedores React tendem a ignorar esses conceitos e optar por escrever um código que simplesmente funcione.
O código que simplesmente funciona é ótimo, até que pare de funcionar. Código mal organizado é mais difícil de manter e atualizar. Isso pode tornar complicado adicionar novos recursos ou trazer outros programadores para trabalhar no projeto. Corrigir esses problemas já criados é uma carga de trabalho e é melhor preveni-los desde o início.
A aplicação do padrão de design de contêiner e componentes de apresentação garante que cada componente em seu projeto tenha uma tarefa clara com a qual lidar. Isso atinge uma estrutura modular onde cada componente otimizado se reúne para completar seu aplicativo.
Seus componentes ainda podem se sobrepor; a divisão de funções entre um recipiente e um componente de apresentação nem sempre é distinta. No entanto, como regra geral, você deve focar seus componentes de apresentação em dados visuais e seus componentes de contêiner em dados e lógica.
Como usar contêineres e componentes de apresentação em React Native
Em um aplicativo React Native típico, é comum criar componentes que contenham códigos de apresentação e relacionados à lógica. Você pode buscar dados de uma API, gerenciar o estado de um formulário e exibir a saída, tudo em uma classe. Considere um aplicativo simples que buscar uma lista de usuários de uma API e mostrar seus nomes e idade.
Você pode fazer isso com um único componente, mas resultará em um código difícil de ler, não reutilizável e mais difícil de testar e manter.
Por exemplo:
importar Reagir, { useState, useEffect } de'reagir';
importar { Ver, Texto, FlatList } de'reagir nativo';const UserList = () => {
const [usuários, setUsuários] = useState([]);useEffect(() => {
const buscarUsuários = assíncrono () => {
const resposta = aguardam buscar(' https://example.com/users');
const dados = aguardam resposta.json();
setUsers (dados);
};buscarUsuários();
}, []);retornar (
dados={usuários}
keyExtractor={item => item.id}
renderItem={({ item }) => (Nome: {item.name}</Text> Idade: {item.age}</Text>
</View>
)}
/>
);
};
exportarpadrão Lista de usuários;
Neste exemplo, Lista de usuários é responsável por gerenciar o estado de um campo de entrada, buscar dados de uma API e renderizar os dados.
A maneira melhor e mais eficiente de implementar isso é separar a lógica em UserList em componentes de apresentação e contêiner.
Você pode criar um UserListContainer componente que é responsável por buscar e gerenciar os dados do usuário. Ele pode então passar esses dados para um componente de apresentação, Lista de usuários, como prop.
importar Reagir, { useState, useEffect } de'reagir';// Componente do contêiner
const UserListContainer = () => {
const [usuários, setUsuários] = useState([]);useEffect(() => {
const buscarUsuários = assíncrono () => {
const resposta = aguardam buscar(' https://example.com/users');
const dados = aguardam resposta.json();
setUsers (dados);
};buscarUsuários();
}, []);retornar<Lista de usuáriosUsuários={Usuários} />;
};
exportarpadrão UserListContainer;
Você pode separar a apresentação entre dois componentes de apresentação: Do utilizador e Lista de usuários. Cada um é responsável por simplesmente gerar marcação com base nas props de entrada que recebem.
importar { Ver, Texto, FlatList } de'reagir nativo';// Componente de apresentação
const Usuário = ({ nome idade }) => (Nome: {nome}</Text> Idade: {idade}</Text>
</View>
);
// Componente de apresentação
const UserList = ({ Usuários }) => (
dados={usuários}
keyExtractor={item => item.id}
renderItem={({ item }) => <Do utilizadornome={nome do item}idade={item.idade} />}
/>
);
O novo código separa o componente original em dois componentes de apresentação, Do utilizador e Lista de usuários, e um componente de contêiner, UserListContainer.
Práticas recomendadas para implementação de contêineres e componentes de apresentação
Ao usar componentes de contêiner e apresentação, é importante seguir algumas práticas recomendadas para garantir que os componentes funcionem conforme o esperado.
- Cada componente deve ter um papel claro e específico. O componente contêiner deve gerenciar o estado e o componente de apresentação deve lidar com a apresentação visual.
- Sempre que possível, use componentes funcionais em vez de componentes de classe. Eles são mais simples, fáceis de testar e oferecem melhor desempenho.
- Evite incluir lógica ou funcionalidade em um componente que seja irrelevante para sua finalidade. Isso ajuda a manter os componentes focados e fáceis de manter e testar.
- Use adereços para comunicação entre componentes, separando claramente as preocupações e evitando componentes fortemente acoplados.
- Atualizações desnecessárias no estado podem levar a problemas de desempenho, por isso é importante atualizar o estado apenas quando necessário.
Seguir essas práticas recomendadas garante que o contêiner e os componentes de apresentação funcionem juntos de maneira eficaz para forneça uma solução limpa, organizada e escalável para gerenciar o estado e a apresentação visual em seu aplicativo React Native.
Os benefícios do uso de contêineres e componentes de apresentação
O contêiner e os componentes de apresentação podem fornecer vários benefícios. Eles podem ajudar a melhorar sua estrutura de código, capacidade de manutenção e escalabilidade. Eles também resultam em melhor colaboração e delegação de tarefas entre as equipes. Eles podem até aumentar o desempenho e a otimização do seu aplicativo React Native.
Siga as práticas recomendadas para implementar esses componentes e você poderá criar aplicativos React Native melhores e mais escaláveis.
