Cree mejores aplicaciones nativas React con contenedores y componentes de presentación
Como desarrollador de React o React Native, es importante comprender el concepto de contenedor y componentes de presentación.
Estos patrones de diseño ayudan con la separación adecuada de preocupaciones. Puede usar este concepto para asegurarse de estructurar su código de una manera más fácil de mantener y escalable.
¿Qué son los componentes del contenedor?
Los componentes de contenedor, también conocidos como componentes inteligentes, son responsables de administrar los datos y la lógica en su aplicación. Manejan tareas como obtener datos de una API, actualizar el estado y procesar las interacciones del usuario.
Para implementar esta estructura, puede usar una biblioteca como React-Redux para conectar sus componentes a la tienda y pasar datos y acciones a sus componentes secundarios o componentes de presentación.
¿Qué son los componentes de presentación?
Los componentes de presentación son responsables de mostrar los datos de sus componentes principales. A menudo no tienen estado y se centran en la interfaz de usuario y la representación visual de los datos.
Este estado los hace fáciles de manipular y probar, lo que les otorga el nombre de componentes tontos. El estado mudo de los componentes de presentación le permite reutilizarlos en toda su aplicación. Esto evita código pésimo y repetitivo.
¿Por qué utilizar componentes de presentación y contenedor?
La respuesta corta y simple a la pregunta es: Separación de preocupaciones. Este es un principio clave en varios paradigmas, incluida la programación orientada a objetos, funcional y orientada a aspectos. Sin embargo, muchos desarrolladores de React tienden a ignorar estos conceptos y optan por escribir código que simplemente funciona.
El código que simplemente funciona es genial, hasta que deja de funcionar. El código mal organizado es más difícil de mantener y actualizar. Esto puede dificultar la adición de nuevas funciones o la incorporación de otros programadores para trabajar en el proyecto. Solucionar estos problemas una vez creados es una carga de trabajo y es mejor prevenirlos desde el principio.
La aplicación del patrón de diseño de componentes de presentación y contenedor garantiza que cada componente dentro de su proyecto tenga una tarea clara que manejar. Esto logra una estructura modular donde cada componente optimizado se une para completar su aplicación.
Sus componentes aún pueden superponerse; la división de funciones entre un contenedor y un componente de presentación no siempre es distinta. Sin embargo, como regla general, debe enfocar sus componentes de presentación en datos visuales y sus componentes de contenedor en datos y lógica.
Cómo usar contenedores y componentes de presentación en React Native
En una aplicación típica de React Native, es común crear componentes que contienen código de presentación y relacionado con la lógica. Puede obtener datos de una API, administrar el estado de un formulario y mostrar la salida, todo en una clase. Considere una aplicación simple que obtenga una lista de usuarios de una API y muestre sus nombres y edad.
Puede hacer esto con un solo componente, pero dará como resultado un código difícil de leer, no reutilizable y más difícil de probar y mantener.
Por ejemplo:
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;
En este ejemplo, UserList es responsable de administrar el estado de un campo de entrada, obtener datos de una API y representar los datos.
La forma mejor y más eficiente de implementar esto es separar la lógica en UserList en componentes de presentación y contenedor.
Puede crear un componente UserListContainer que sea responsable de obtener y administrar los datos del usuario. Luego puede pasar estos datos a un componente de presentación, UserList , como accesorio.
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;
Puede separar la presentación entre dos componentes de presentación: User y UserList . Cada uno es responsable de simplemente generar marcas en función de los apoyos de entrada que reciben.
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} />}
/>
);
El nuevo código separa el componente original en dos componentes de presentación, User y UserList , y un componente de contenedor, UserListContainer .
Mejores prácticas para implementar contenedores y componentes de presentación
Cuando utiliza componentes de contenedor y de presentación, es importante seguir algunas prácticas recomendadas para garantizar que los componentes funcionen según lo previsto.
- Cada componente debe tener un rol claro y específico. El componente contenedor debe gestionar el estado y el componente de presentación debe gestionar la presentación visual.
- Siempre que sea posible, utilice componentes funcionales en lugar de componentes de clase. Son más simples, más fáciles de probar y proporcionan un mejor rendimiento.
- Evite incluir lógica o funcionalidad en un componente que sea irrelevante para su propósito. Esto ayuda a mantener los componentes enfocados y fáciles de mantener y probar.
- Use accesorios para la comunicación entre los componentes, separando claramente las preocupaciones y evitando los componentes estrechamente acoplados.
- Las actualizaciones innecesarias del estado pueden generar problemas de rendimiento, por lo que es importante actualizar el estado solo cuando sea necesario.
Seguir estas mejores prácticas garantiza que su contenedor y los componentes de presentación funcionen juntos de manera efectiva para proporcionar una solución limpia, organizada y escalable para administrar el estado y la presentación visual en su aplicación React Native.
Los beneficios de usar contenedores y componentes de presentación
Los componentes de presentación y contenedor pueden proporcionar varios beneficios. Pueden ayudar a mejorar la estructura del código, la capacidad de mantenimiento y la escalabilidad. También resultan en una mejor colaboración y delegación de tareas entre equipos. Incluso pueden conducir a un mayor rendimiento y optimización de su aplicación React Native.
Siga las mejores prácticas para implementar estos componentes y podrá crear aplicaciones React Native mejores y más escalables.
Deja una respuesta