Komposisi di React

React mengimplementasikan pola searah untuk aliran data untuk komponen bangunan. Pola itu sendiri tidak unik untuk bereaksi tetapi diikuti dengan tepat dalam bereaksi.

Aliran data searah secara sederhana berarti bahwa data hanya dapat mengalir dengan satu cara saja.

Mengikuti definisi dan jika berpengalaman dengan react, Anda akan memperhatikan bahwa komponen anak tidak dapat meneruskan data ke komponen induk; oleh karena itu, data hanya mengalir dalam satu cara, “ DARI induk KE anak”.

Jika kita perlu memodifikasi anak yang mempengaruhi induk atau berbagi keadaan antara dua komponen anak, kita menggunakan alat peraga.

Mari kita lihat contoh yang sepele.

Dalam contoh di atas, kita membuat beberapa asumsi bahwa fungsi App bertanggung jawab untuk menangani login, dan itu melewati “ loggedin ” negara dan “ handleSetLoggedIn fungsi” untuk header.

Mari selidiki komponen Header dan lihat bagaimana ia menggunakan alat peraga ini.

Di atas, kita dapat melihat bahwa komponen Header tidak menggunakan props tetapi meneruskannya ke Profil yang memanfaatkannya. Situasi ini dikenal dengan istilah props drilling.

Pengeboran alat peraga

Pengeboran alat peraga adalah meneruskan alat peraga ke komponen anak yang tidak memerlukan alat peraga tetapi membantu untuk meneruskannya ke komponen anaknya sendiri, yang mungkin meneruskannya ke komponen anaknya sendiri karena tidak membutuhkannya juga sampai sampai anak yang benar-benar membutuhkan alat peraga.

Masalah dengan pengeboran alat peraga adalah segala sesuatunya menjadi berantakan, dan debugging mungkin menjadi sulit dengan cepat.

Solusi yang baik mungkin menjangkau API konteks atau Redux, tetapi itu tidak diperlukan untuk menyelesaikan masalah ini.

Kita bisa menggunakan komposisi (komposisi komponen) untuk keuntungan kita. Faktanya, tim React mengatakan:

Jika Anda hanya ingin menghindari melewatkan beberapa props melalui banyak level, komposisi komponen seringkali merupakan solusi yang lebih sederhana daripada konteks.

- React Team

Apakah komposisi itu?

Komposisi adalah tindakan merakit komponen atau elemen untuk membangun keseluruhan.

React memberikan alat yang ampuh yang membantu komposisi, yaitu alat peraga anak-anak.

Kita dapat dengan mudah melakukan refaktorisasi komponen Header seperti ini.

Alat bantu anak tersedia di setiap komponen. Ini berisi konten antara tag pembuka dan penutup dari sebuah komponen.

Sekarang, komponen Header kita adalah pembungkus untuk anak-anak yang kita pilih untuk dirender di dalamnya.

Ini memberi kita kemampuan untuk memfaktor ulang render komponen Aplikasi kita di " App.js. "

Kami telah menyelesaikan masalah dengan pengeboran alat peraga dengan memanfaatkan komposisi.

Pola ini juga memberi kita kekuatan untuk membangun komponen yang dapat digunakan kembali dengan skala yang lebih besar, terutama saat membuat alat, perpustakaan, atau komponen yang digunakan oleh banyak orang dengan berbagai kebutuhan.

Artikel selanjutnya akan membuat komponen kartu dan melihat bagaimana komposisi dapat menjadi pola yang menarik untuk dipikirkan dan sering digunakan.

Terima kasih telah membaca.