Status React vs props

P rops

Alat peraga juga dikenal sebagai properti. Alat peraga adalah apa yang memungkinkan kita untuk meneruskan nilai ke dalam komponen dan antar komponen. Properti diturunkan dari komponen induk. Untuk meneruskan props ke sebuah komponen, seseorang menambahkannya ke dalam fungsi render sebagai atribut.

Catatan penting lainnya adalah bahwa nilai props diteruskan melalui JSX dalam kurung kurawal {}. Properti dapat berupa nilai apa pun seperti objek, array, string, fungsi, dll. Salah satu hal yang menyenangkan tentang properti adalah memungkinkan komponen react kita menjadi dinamis dan dapat digunakan kembali. Jika tidak, kami akan terjebak dengan data kode keras dan itu mengalahkan semua manfaat dari react. Batasan dengan props adalah agar props berubah, komponen induk harus mengirimkan props baru.

Berikut adalah contoh bagaimana alat peraga diturunkan.

Dalam contoh di atas, komponen induknya adalah MainComponent dan perlu meneruskan data ke komponen anak yaitu ListForm. Komponen anak telah diberi prop token.

S tate

Pertama dan untuk kebanyakan, status adalah objek JavaScript biasa. Status adalah data di komponen Anda yang dimutasi. Keadaan komponen dapat berubah selama masa pakai komponen. Status dibuat dan dikelola secara internal, di dalam sebuah komponen. Status digunakan ketika diharapkan beberapa nilai akan berubah, misalnya mengklik tombol suka, memasukkan informasi ke dalam formulir, dll. Status awalnya disiapkan di konstruktor dasar.

Berikut adalah contoh cara kami menyiapkan negara bagian.

Ingat, status berubah saat pengguna memicu beberapa peristiwa di browser. Agar negara melakukan pembaruan, setState () digunakan. Status tidak boleh diubah secara langsung melainkan dengan setState ().

Lihat contoh di bawah ini.

Negara memegang data awal. Ketika status perlu diperbarui, React segera merender ulang DOM khusus untuk perubahan itu. Metode setState () inilah yang memicu DOM untuk dirender ulang.

Status dulu hanya tersedia di komponen kelas dan bukan di komponen fungsional. Komponen fungsional dikenal sebagai komponen stateless, namun, sejak React memperkenalkan hook, status dapat digabungkan.

Singkatnya:

Alat peraga berada di luar komponen dan diturunkan dari komponen induk. Komponen anak tidak dapat langsung mengubah alat peraga.

Status bersifat internal untuk komponen dan diperbarui oleh pengguna yang memicu peristiwa di browser. Status diperbarui melalui metode yang disebut setState (). Status tidak dapat diakses di luar komponen, itu bersifat pribadi untuk komponen.

Alat peraga digunakan untuk mengirimkan data, dan status digunakan untuk mengelola data.

Semoga artikel ini membantu menjelaskan perbedaan utama antara status React dan props.

Selamat membuat kode…