Crie aplicativos nativos de reação melhores com componentes de contêiner e apresentação
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 preocupações. 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 exibirá 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:
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View>
<Text>Name: {item.name}</Text>
<Text>Age: {item.age}</Text>
</View>
)}
/>
);
};
export default UserList;
Neste exemplo, UserList é 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 componente UserListContainer responsável por buscar e gerenciar os dados do usuário. Ele pode então passar esses dados para um componente de apresentação, UserList , como um suporte.
import React, { useState, useEffect } from 'react';
// Container Component
const UserListContainer = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return <UserList users={users} />;
};
export default UserListContainer;
Você pode separar a apresentação entre dois componentes de apresentação: User e UserList . Cada um é responsável por simplesmente gerar marcação com base nas props de entrada que recebem.
import { View, Text, FlatList } from 'react-native';
// Presentational Component
const User = ({ name, age }) => (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
</View>
);
// Presentational Component
const UserList = ({ users }) => (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <User name={item.name} age={item.age} />}
/>
);
O novo código separa o componente original em dois componentes de apresentação, User e UserList , 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 fornecer 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 escalonáveis.
Deixe um comentário