Sebagai pengembang React atau React Native, penting untuk memahami konsep wadah dan komponen presentasi.
Pola desain ini membantu pemisahan perhatian yang tepat. Anda dapat menggunakan konsep ini untuk memastikan bahwa Anda menyusun kode dengan cara yang lebih dapat dipelihara dan diskalakan.
Apa itu Komponen Kontainer?
Komponen penampung, juga dikenal sebagai komponen pintar, bertanggung jawab untuk mengelola data dan logika di aplikasi Anda. Mereka menangani tugas seperti mengambil data dari API, memperbarui status, dan memproses interaksi pengguna.
Untuk mengimplementasikan struktur ini, Anda dapat menggunakan perpustakaan seperti React-Redux untuk menghubungkan komponen Anda ke penyimpanan dan meneruskan data dan tindakan ke komponen anak atau komponen presentasi Anda.
Apa itu Komponen Presentasi?
Komponen presentasi bertanggung jawab untuk menampilkan data dari komponen induknya. Mereka seringkali tidak memiliki kewarganegaraan dan fokus pada UI dan representasi visual dari data.
Status ini membuat mereka mudah untuk dimanipulasi dan diuji, sehingga disebut komponen bodoh. Keadaan bodoh dari komponen presentasi memungkinkan Anda untuk menggunakannya kembali di seluruh aplikasi Anda. Ini menghindari kode yang buruk dan berulang.
Mengapa Menggunakan Komponen Kontainer dan Presentasi?
Jawaban singkat dan sederhana untuk pertanyaan tersebut adalah: Pemisahan Kekhawatiran. Ini adalah prinsip kunci dalam beberapa paradigma, termasuk pemrograman berorientasi objek, fungsional, dan berorientasi aspek. Namun, banyak pengembang React cenderung mengabaikan konsep ini dan memilih untuk menulis kode yang berfungsi dengan baik.
Kode yang berfungsi itu bagus, sampai berhenti bekerja. Kode yang tidak tertata dengan baik lebih sulit untuk dipertahankan dan diperbarui. Ini bisa menyulitkan untuk menambahkan fitur baru atau membawa pemrogram lain untuk mengerjakan proyek. Memperbaiki masalah ini setelah dibuat adalah beban kerja, dan lebih baik dicegah sejak awal.
Menerapkan pola desain wadah dan komponen presentasi memastikan bahwa setiap komponen dalam proyek Anda memiliki tugas yang jelas yang ditanganinya. Ini mencapai struktur modular di mana setiap komponen yang dioptimalkan bersatu untuk melengkapi aplikasi Anda.
Komponen Anda mungkin masih tumpang tindih; pembagian tugas antara wadah dan komponen presentasi tidak selalu berbeda. Namun, sebagai aturan umum, Anda harus memfokuskan komponen presentasi Anda pada data visual, dan komponen wadah Anda pada data dan logika.
Cara Menggunakan Komponen Kontainer dan Presentasi di React Native
Dalam aplikasi React Native yang khas, adalah umum untuk membuat komponen yang berisi kode terkait presentasi dan logika. Anda dapat mengambil data dari API, mengelola status formulir, dan menampilkan keluaran semuanya dalam satu kelas. Pertimbangkan aplikasi sederhana yang akan mengambil daftar pengguna dari API dan tampilkan nama dan usia mereka.
Anda dapat melakukannya dengan satu komponen, tetapi akan menghasilkan kode yang sulit dibaca, tidak dapat digunakan kembali, dan lebih sulit untuk diuji dan dipelihara.
Misalnya:
impor Bereaksi, { useState, useEffect } dari'reaksi';
impor { Lihat, Teks, Daftar Datar } dari'bereaksi-asli';const Daftar Pengguna = () => {
const [pengguna, setUsers] = useState([]);gunakanEfek(() => {
const ambilUsers = asinkron () => {
const tanggapan = menunggu mengambil(' https://example.com/users');
const data = menunggu respon.json();
setUsers (data);
};fetchUsers();
}, []);kembali (
data={pengguna}
keyExtractor={item => item.id}
renderItem={({ item }) => (Nama: {item.nama}</Text> Umur: {item.age}</Text>
</View>
)}
/>
);
};
eksporbawaan Daftar pengguna;
Dalam contoh ini, Daftar pengguna bertanggung jawab untuk mengelola status kolom input, mengambil data dari API, dan merender data.
Cara yang lebih baik dan lebih efisien untuk mengimplementasikan ini adalah dengan memisahkan logika di UserList menjadi komponen presentasi dan wadah.
Anda dapat membuat UserListContainer komponen yang bertanggung jawab untuk mengambil dan mengelola data pengguna. Itu kemudian dapat meneruskan data ini ke komponen presentasi, Daftar pengguna, sebagai penyangga.
impor Bereaksi, { useState, useEffect } dari'reaksi';// Komponen Kontainer
const UserListContainer = () => {
const [pengguna, setUsers] = useState([]);gunakanEfek(() => {
const ambilUsers = asinkron () => {
const tanggapan = menunggu mengambil(' https://example.com/users');
const data = menunggu respon.json();
setUsers (data);
};fetchUsers();
}, []);kembali<Daftar penggunapengguna={pengguna} />;
};
eksporbawaan UserListContainer;
Anda dapat memisahkan presentasi antara dua komponen presentasi: Pengguna Dan Daftar pengguna. Masing-masing bertanggung jawab untuk menghasilkan markup berdasarkan alat peraga masukan yang mereka terima.
impor { Lihat, Teks, Daftar Datar } dari'bereaksi-asli';// Komponen Presentasi
const Pengguna = ({ nama, umur }) => (Nama: {nama}</Text> Umur: {umur}</Text>
</View>
);
// Komponen Presentasi
const Daftar Pengguna = ({ pengguna }) => (
data={pengguna}
keyExtractor={item => item.id}
renderItem={({ item }) => <Penggunanama={nama barang}usia={item.usia} />}
/>
);
Kode baru memisahkan komponen asli menjadi dua komponen presentasi, Pengguna Dan Daftar pengguna, dan satu komponen wadah, UserListContainer.
Praktik Terbaik untuk Menerapkan Komponen Kontainer dan Presentasi
Saat Anda menggunakan wadah dan komponen presentasi, penting untuk mengikuti beberapa praktik terbaik untuk memastikan bahwa komponen berfungsi sebagaimana mestinya.
- Setiap komponen harus memiliki peran yang jelas dan spesifik. Komponen wadah harus mengatur keadaan dan komponen presentasi harus menangani presentasi visual.
- Jika memungkinkan, gunakan komponen fungsional alih-alih komponen kelas. Mereka lebih sederhana, lebih mudah untuk diuji, dan memberikan kinerja yang lebih baik.
- Hindari menyertakan logika atau fungsionalitas dalam komponen yang tidak relevan dengan tujuannya. Ini membantu menjaga komponen tetap fokus dan mudah dirawat serta diuji.
- Gunakan alat peraga untuk komunikasi antar komponen, pisahkan masalah dengan jelas dan hindari komponen yang dipasangkan dengan erat.
- Pembaruan status yang tidak perlu dapat menyebabkan masalah kinerja, jadi penting untuk hanya memperbarui status bila diperlukan.
Mengikuti praktik terbaik ini memastikan wadah dan komponen presentasi Anda bekerja sama secara efektif memberikan solusi yang bersih, teratur, dan dapat diskalakan untuk mengelola status dan presentasi visual di aplikasi React Native Anda.
Manfaat Menggunakan Wadah dan Komponen Presentasi
Container dan Presentational Components dapat memberikan beberapa manfaat. Mereka dapat membantu meningkatkan struktur kode, pemeliharaan, dan skalabilitas Anda. Mereka juga menghasilkan kolaborasi dan pendelegasian tugas yang lebih baik di antara tim. Mereka bahkan dapat meningkatkan kinerja dan pengoptimalan aplikasi React Native Anda.
Ikuti praktik terbaik untuk mengimplementasikan komponen ini, dan Anda dapat membuat aplikasi React Native yang lebih baik dan lebih skalabel.