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 usare una libreria come React-Redux per connettere i tuoi componenti al negozio e trasmettere 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 lo farà recuperare un elenco di utenti da un'API e visualizzare i loro 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:
importare Reagire, {useState, useEffect} da'reagire';
importare {Visualizza, Testo, FlatList} da'nativo di reazione';cost Elenco utenti = () => {
cost [utenti, setUsers] = useState([]);usaEffetto(() => {
cost fetchUtenti = asincrono () => {
cost risposta = attendere andare a prendere(' https://example.com/users');
cost dati = attendere risposta.json();
setUsers (dati);
};fetchUtenti();
}, []);ritorno (
dati={utenti}
keyExtractor={item => item.id}
renderItem={({ elemento }) => (Nome: {item.name}</Text> Età: {item.age}</Text>
</View>
)}
/>
);
};
esportarepredefinito Lista degli utenti;
In questo esempio, Lista degli utenti è 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.
Puoi creare un UserListContenitore componente responsabile del recupero e della gestione dei dati dell'utente. Può quindi passare questi dati a un componente di presentazione, Lista degli utenti, come oggetto di scena.
importare Reagire, {useState, useEffect} da'reagire';// Componente contenitore
cost UserListContainer = () => {
cost [utenti, setUsers] = useState([]);usaEffetto(() => {
cost fetchUtenti = asincrono () => {
cost risposta = attendere andare a prendere(' https://example.com/users');
cost dati = attendere risposta.json();
setUsers (dati);
};fetchUtenti();
}, []);ritorno<Lista degli utentiutenti={utenti} />;
};
esportarepredefinito UserListContenitore;
Puoi separare la presentazione tra due componenti di presentazione: Utente E Lista degli utenti. Ognuno è responsabile della semplice generazione del markup in base agli oggetti di scena che riceve.
importare {Visualizza, Testo, FlatList} da'nativo di reazione';// Componente di presentazione
cost Utente = ({ nome età }) => (Nome: {nome}</Text> Età: {età}</Text>
</View>
);
// Componente di presentazione
cost Elenco utenti = ({ utenti }) => (
dati={utenti}
keyExtractor={item => item.id}
renderItem={({ elemento }) => <Utentenome={Nome dell'elemento}età={articolo.età} />}
/>
);
Il nuovo codice separa il componente originale in due componenti di presentazione, Utente E Lista degli utentie un componente contenitore, UserListContenitore.
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.
Il rispetto di queste best practice assicura che i componenti del contenitore e della presentazione funzionino insieme in modo efficace 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.
