Komponen React - Alat Peraga dan Status di ReactJS dengan Contoh

“Di React, semuanya adalah sebuah komponen”

Jika Anda terbiasa dengan React, Anda pasti pernah mendengar atau membaca frasa ini berkali-kali. Tapi tahukah Anda apa artinya sebenarnya dan bagaimana itu digunakan? Jika tidak, bacalah blog ini untuk mempelajari semua tentang komponen React dan berbagai fase dalam siklus proses. Saya yakin pada saat Anda selesai membaca blog ini Anda akan memiliki pemahaman lengkap tentang komponen React dan konsep sekitarnya. Tetapi sebelum melanjutkan, lihat sekilas topik yang akan saya diskusikan:

• Apa itu Komponen React?
• Keuntungan Komponen React
• Atribut
• Serikat
• Serikat vs Alat Peraga
• Siklus Hidup Komponen React

Apa itu Komponen React?

Sebelumnya pengembang harus menulis 1000 baris kode untuk mengembangkan aplikasi satu halaman sederhana. Sebagian besar aplikasi tersebut mengikuti struktur DOM tradisional dan membuat perubahan pada mereka sangat menantang dan tugas yang membosankan bagi para pengembang.Mereka secara manual harus mencari elemen yang membutuhkan perubahan dan memperbaruinya sesuai. Bahkan kesalahan kecil pun akan menyebabkan kegagalan aplikasi. Selain itu, memperbarui DOM sangat mahal. Dengan demikian, pendekatan berbasis komponen diperkenalkan. Dalam pendekatan ini, seluruh aplikasi dibagi menjadi beberapa bagian logis yang disebut Komponen. React adalah salah satu framework yang memilih pendekatan ini.Jika Anda berencana untuk membangun karir Anda dalam pengembangan web, memulai lebih awal akan membuka banyak peluang bagi Anda.

Sekarang mari kita pahami apa saja komponen-komponen ini.

Komponen React dianggap sebagai blok bangunan Antarmuka Pengguna. Masing-masing komponen ini ada dalam ruang yang sama tetapi dijalankan secara independen satu sama lain. Komponen React memiliki struktur, metode, dan API sendiri. Mereka dapat digunakan kembali dan dapat disuntikkan ke antarmuka sesuai kebutuhan. Untuk mendapatkan pemahaman yang lebih baik, pertimbangkan seluruh UI sebagai pohon.Di sini komponen awal menjadi root dan masing-masing potongan independen menjadi cabang, yang selanjutnya dibagi menjadi sub-cabang.

Ini membuat UI kami tetap teratur dan memungkinkan data dan perubahan status mengalir secara logis dari akar ke cabang dan kemudian ke sub-cabang. Komponen melakukan panggilan ke server langsung dari sisi klien yang memungkinkan DOM memperbarui secara dinamis tanpa memuat ulang halaman. Ini karena komponen react dibangun di atas konsep permintaan AJAX. Setiap komponen memiliki antarmuka sendiri yang dapat melakukan panggilan ke server dan memperbaruinya. Karena komponen ini tidak bergantung satu sama lain, masing-masing dapat menyegarkan tanpa memengaruhi yang lain atau UI secara keseluruhan.

Kita gunakan React.createClass () metode untuk membuat komponen. Metode ini harus melewati argumen objek yang akan menentukan komponen React. Setiap komponen harus mengandung satu memberikan() metode. Ini adalah properti paling penting dari sebuah komponen yang bertanggung jawab untuk mengurai HTML di JavaScript, JSX. Ini memberikan() akan mengembalikan representasi HTML dari komponen sebagai simpul DOM. Oleh karena itu, semua tag HTML harus diapit oleh tag penutup di dalam memberikan() .

Berikut ini adalah contoh kode untuk membuat sebuah komponen.

apa kerangka pegas

import React dari 'react' import ReactDOM dari kelas 'react-dom' MyComponent memperluas React.Component {render () {return (
Id Anda adalah {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Serikat vs Alat Peraga

Siklus Hidup Komponen React

React menyediakan berbagai metode yang memberi tahu saat tahapan tertentu dalam siklus hidup suatu komponen terjadi. Metode ini disebut metode siklus hidup. Metode siklus hidup ini tidak terlalu rumit. Anda dapat menganggap metode ini sebagai penanganan peristiwa khusus yang dipanggil di berbagai titik selama masa pakai komponen. Anda bahkan dapat menambahkan kode Anda sendiri ke metode ini untuk melakukan berbagai tugas. Berbicara tentang daur hidup suatu komponen, daur hidup tersebut terbagi menjadi 4 fase. Mereka:

1. Tahap awal
2. Fase Pembaruan
3. Alat peraga mengubah Fase
4. Fase Pelepasan

Masing-masing fase ini berisi beberapa metode siklus hidup yang khusus untuk mereka. Jadi sekarang mari kita cari tahu apa yang terjadi selama masing-masing tahap ini.

Sebuah. Tahap awal - Fase pertama siklus hidup komponen React adalah fase awal atau fase rendering awal. Dalam fase ini,komponen akan memulai perjalanannya dan menuju ke DOM. Fase ini terdiri dari metode berikut yang dipanggil dalam urutan yang telah ditentukan sebelumnya.

1. getDefaultProps (): Metode ini digunakan untuk menentukan nilai default this.props . Itu dipanggil bahkan sebelum komponen Anda dibuat atau props apa pun dari induk dilewatkan ke dalamnya.
2. getInitialState (): Metode ini digunakan untukmenentukan nilai default this.state sebelum komponen Anda dibuat.
3. componentWillMount (): Ini adalah metode terakhir yang bisa Anda panggil sebelum komponen Anda dirender ke DOM. Tetapi jika Anda menelepon setState () di dalam metode ini komponen Anda tidak akan dirender ulang.
4. memberikan(): Th adalah metode yang bertanggung jawab untuk mengembalikan satu simpul HTML root dan harus didefinisikan di setiap komponen. Anda bisa kembali batal atau Salah jika Anda tidak ingin merender apa pun.
5. componentDidMount (): Setelah komponen dirender dan ditempatkan di DOM, ini metode disebut. Di sini Anda dapat melakukan operasi kueri DOM apa pun.

b. Fase Pembaruan - Setelah komponen ditambahkan ke DOM, mereka dapat memperbarui dan merender ulang hanya ketika terjadi perubahan status. Setiap kali status berubah, komponen memanggilnya memberikan() lagi. Setiap komponen, yang mengandalkan keluaran dari komponen ini juga akan memanggilnya memberikan() lagi. Ini dilakukan, untuk memastikan bahwa komponen kami menampilkan versi terbaru dari dirinya sendiri. Jadi, untuk berhasil memperbarui status komponen, metode berikut dipanggil dalam urutan yang diberikan:

1. shouldComponentUpdate (): Dengan menggunakan metode ini, Anda dapat mengontrol perilaku komponen untuk memperbarui dirinya sendiri. Jika Anda mengembalikan nilai true dari metode ini,komponen akan diperbarui. Lain jika metode ini mengembalikan fileSalah, komponen akan melewatkan pembaruan.
2. componentWillUpdate (): Tmetodenya disebut jtepat sebelum komponen Anda akan diperbarui. Dalam metode ini, Anda tidak dapat mengubah status komponen Anda dengan memanggil this.setState .
3. memberikan(): Jika Anda mengembalikan false melalui shouldComponentUpdate () , kode di dalamnya memberikan() akan dipanggil lagi untuk memastikan bahwa komponen Anda menampilkan dirinya sendiri dengan benar.
4. componentDidUpdate (): Setelah komponen diperbarui dan dirender, metode ini akan dipanggil. Anda dapat memasukkan kode apa pun di dalam metode ini, yang ingin Anda jalankan setelah komponen diperbarui.

c. Fase Perubahan Alat Peraga - Setelah komponen telah dirender ke DOM, satu-satunya waktu lain komponen akan diperbarui, selain dari perubahan status adalah ketika nilai prop berubah. Praktisnya, fase ini bekerja sama dengan fase sebelumnya, tetapi alih-alih status, ini berhubungan dengan props. Jadi, fase ini hanya memiliki satu metode tambahan dari Fase Pembaruan.

1. componentWillReceiveProps (): Metode ini mengembalikan satu argumen yang berisi nilai prop baru yang akan ditugaskan ke komponen.
   Metode siklus hidup lainnya berperilaku identik dengan metode yang kita lihat di fase sebelumnya.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. memberikan()
5. componentDidUpdate ()

d.Fase Pelepasan -Ini adalah fase terakhir siklus hidup komponen di mana komponen dihancurkan dan dihapus sepenuhnya dari DOM. Ini hanya berisi satu metode:

1. componentWillUnmount (): Setelah metode ini dipanggil, komponen Anda akan dihapus dari DOM secara permanen.Dalam metode ini, YAnda dapat melakukan tugas-tugas terkait pembersihan seperti menghapus pendengar acara, menghentikan timer, dll.

Berikut adalah seluruh diagram siklus hidup:

Ini membawa kita ke bagian akhir blog di React Components. Saya harap di blog ini saya bisa menjelaskan dengan jelas apa itu Komponen React, bagaimana mereka digunakan. Anda dapat merujuk ke blog saya di , jika Anda ingin mempelajari lebih lanjut tentang ReactJS.

Jika Anda ingin dilatih dalam React dan ingin mengembangkan UI yang menarik sendiri, lihat oleh Edureka, perusahaan pembelajaran online tepercaya dengan jaringan lebih dari 250.000 pelajar yang puas dan tersebar di seluruh dunia.

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar dan kami akan menghubungi Anda kembali.