Reaksi: Perbedaan antara komponen kelas dan komponen fungsional

Apakah Anda sedang menjalin hubungan baru? Ingin belajar sesuatu yang baru dalam waktu kurang dari 5 menit? Mari cari tahu tentang komponen reaksi.

Apa itu komponen?

Pertama, sebelum kita masuk ke pemahaman yang lebih dalam tentang topik ini, kita perlu tahu persis apa itu konstituennya.

Komponen (reaksi) didefinisikan sebagai blok atau program yang dapat digunakan kembali di seluruh program (dan bukan yang lain), biasanya dikaitkan dengan elemen uI dan perilakunya.

Sekarang setelah Anda mengetahui dasar-dasarnya, mari kita lihat dua jenis komponen yang dapat Anda buat di React, Komponen Kelas dan Komponen Fungsional.

Komponen kelas

Ini disebut komponen utama. Kami memiliki "kelas" dalam javascript sejak ECMAScript 2015. Bereaksi menggunakan sintaks ini untuk membuat komponen status dengan siklus hidup. Negara sering digunakan untuk mengubah perilaku konstituen kita atau anak-anak mereka.

Mari kita hancurkan kode ini. Di sini kita memiliki "kelas JS" yang mewarisi fungsi dari React.Component, jadi kami mendeklarasikan konstruktor yang menerima props sebagai argumen. Selanjutnya, kita memanggil data, kita diharuskan membuat jenis komponen ini untuk meneruskan data ke komponen kelas induk.

"Requisite" adalah objek yang menerima semua atribut yang kami gunakan sebagai tag komponen.

Komponen lampu memiliki proposisi dasar yang menyediakan teks dan tombol blok HTML.

Menekan tombol lampu hidup atau mati, di mana posisi kita dalam permainan, pada baris 4 kita memulai Lampu dan kemudian kita mendeklarasikan metode pencahayaan, yang mengubah posisi. lampu kita.

"status" ini adalah objek dengan beberapa properti yang berubah selama eksekusi kursus. Seharusnya tidak diubah secara langsung, tetapi metode setState.

Anda dapat mengubah status sebagai berikut:

Komponen fungsional

Sekarang, jika kita ingin membuat komponen yang minimal, sederhana dan tanpa kewarganegaraan, ini akan membantu Anda mengurangi jumlah kode yang digunakan dan membuat prinsip KERING lebih mudah. Komponen fungsional adalah fungsi javascript yang mengembalikan beberapa Jxs.

Pertimbangkan contoh komponen bohlam.

Di sini kita memiliki fungsi konstan yang mendapatkan objek rusak bernama lampState, itu menjadi variabel lokal, dan mengevaluasi apakah kembalinya tag gambar lain sudah benar.

Kami sekarang akan menggunakannya untuk menunjukkan bagaimana komponen Lamp dapat bekerja bersama.

Ini akan mengubah gambar bola lampu saat Anda menekan tombol.

Bagaimana dengan kait?

Kait adalah fitur yang akan datang yang memungkinkan Anda untuk menggunakan posisi dalam komponen fungsional. Ini perlu dijelaskan lebih terinci karena kita perlu mempelajari lebih dalam tentang reaksi ini, dan saya pikir itu layak untuk artikelnya sendiri.

Terima kasih telah membaca, dan jika Anda suka atau tidak, beri tahu saya pendapat Anda. -