Crea app native per reagire meglio con componenti container e di presentazione
In qualità di sviluppatore React o React Native, è importante comprendere il concetto di contenitore e componenti di presentazione.
Questi modelli di progettazione aiutano con la corretta separazione delle preoccupazioni. Puoi usare questo concetto per assicurarti di strutturare il tuo codice in modo più gestibile e scalabile.
Cosa sono i componenti del contenitore?
I componenti del contenitore, noti anche come componenti intelligenti, sono responsabili della gestione dei dati e della logica nella tua app. Gestiscono attività come il recupero dei dati da un’API, l’aggiornamento dello stato e l’elaborazione delle interazioni degli utenti.
Per implementare questa struttura, puoi utilizzare una libreria come React-Redux per connettere i tuoi componenti allo store e trasferire dati e azioni ai componenti figlio o ai componenti di presentazione.
Cosa sono i componenti di presentazione?
I componenti di presentazione sono responsabili della visualizzazione dei dati dai loro componenti principali. Sono spesso senza stato e si concentrano sull’interfaccia utente e sulla rappresentazione visiva dei dati.
Questo stato li rende facili da manipolare e testare, guadagnandosi il nome di componenti stupidi. Lo stato stupido dei componenti di presentazione ti consente di riutilizzarli nell’intera applicazione. Questo evita codice scadente e ripetitivo.
Perché utilizzare componenti contenitore e di presentazione?
La risposta breve e semplice alla domanda è: Separazione delle preoccupazioni. Questo è un principio chiave in diversi paradigmi, tra cui la programmazione orientata agli oggetti, funzionale e orientata agli aspetti. Tuttavia, molti sviluppatori React tendono a ignorare questi concetti e scelgono di scrivere codice che funzioni.
Il codice che funziona è fantastico, finché non smette di funzionare. Il codice mal organizzato è più difficile da mantenere e aggiornare. Ciò può rendere complicato aggiungere nuove funzionalità o coinvolgere altri programmatori per lavorare al progetto. Risolvere questi problemi una volta già creati è un carico di lavoro ed è meglio prevenirli dall’inizio.
L’applicazione del modello di progettazione dei componenti contenitore e di presentazione garantisce che ogni componente all’interno del progetto abbia un’attività chiara da gestire. In questo modo si ottiene una struttura modulare in cui ogni componente ottimizzato si unisce per completare la tua app.
I tuoi componenti potrebbero ancora sovrapporsi; la divisione dei compiti tra contenitore e componente presentazionale non è sempre netta. Tuttavia, come regola generale, dovresti concentrare i tuoi componenti di presentazione sui dati visivi e i componenti del contenitore sui dati e sulla logica.
Come utilizzare i componenti del contenitore e della presentazione in React Native
In una tipica app React Native, è comune creare componenti che contengono sia codice di presentazione che relativo alla logica. Potresti recuperare i dati da un’API, gestire lo stato di un modulo e visualizzare l’output in un’unica classe. Considera una semplice app che recupererà un elenco di utenti da un’API e ne visualizzerà i nomi e l’età.
Puoi farlo con un singolo componente, ma risulterà in un codice difficile da leggere, non riutilizzabile e più difficile da testare e mantenere.
Per esempio:
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;
In questo esempio, UserList è responsabile della gestione dello stato di un campo di input, del recupero dei dati da un’API e del rendering dei dati.
Il modo migliore e più efficiente per implementare ciò consiste nel separare la logica in UserList in componenti di presentazione e contenitore.
È possibile creare un componente UserListContainer responsabile del recupero e della gestione dei dati utente. Può quindi passare questi dati a un componente di presentazione, UserList , come prop.
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;
Puoi separare la presentazione tra due componenti di presentazione: User e UserList . Ognuno è responsabile della semplice generazione del markup in base agli oggetti di scena che riceve.
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} />}
/>
);
Il nuovo codice separa il componente originale in due componenti di presentazione, User e UserList , e un componente contenitore, UserListContainer .
Best practice per l’implementazione di contenitori e componenti di presentazione
Quando utilizzi i componenti contenitore e di presentazione, è importante seguire alcune best practice per garantire che i componenti funzionino come previsto.
- Ogni componente dovrebbe avere un ruolo chiaro e specifico. Il componente contenitore dovrebbe gestire lo stato e il componente di presentazione dovrebbe gestire la presentazione visiva.
- Ove possibile, utilizzare componenti funzionali anziché componenti di classe. Sono più semplici, più facili da testare e forniscono prestazioni migliori.
- Evitare di includere la logica o la funzionalità in un componente che è irrilevante per il suo scopo. Questo aiuta a mantenere i componenti focalizzati e facili da mantenere e testare.
- Usa oggetti di scena per la comunicazione tra componenti, separando chiaramente le preoccupazioni ed evitando componenti strettamente accoppiati.
- Gli aggiornamenti non necessari allo stato possono causare problemi di prestazioni, quindi è importante aggiornare lo stato solo quando necessario.
Seguire queste best practice garantisce che i componenti del contenitore e della presentazione funzionino insieme in modo efficace per fornire una soluzione pulita, organizzata e scalabile per la gestione dello stato e della presentazione visiva nella tua app React Native.
I vantaggi dell’utilizzo di contenitori e componenti di presentazione
I componenti contenitore e di presentazione possono offrire diversi vantaggi. Possono contribuire a migliorare la struttura del codice, la manutenibilità e la scalabilità. Si traducono anche in una migliore collaborazione e delega di compiti tra i team. Possono persino portare a un aumento delle prestazioni e all’ottimizzazione della tua app React Native.
Segui le best practice per l’implementazione di questi componenti e puoi creare app React Native migliori e più scalabili.
Lascia un commento