React Components - Props dan State di ReactJS dengan Contoh

'Dalam React, semuanya adalah komponen'

Sekiranya anda sudah biasa dengan React, anda pasti pernah mendengar atau membaca ungkapan ini berkali-kali. Tetapi adakah anda tahu apa maksudnya dengan tepat dan bagaimana ia digunakan? Sekiranya tidak, baca blog ini untuk mengetahui semua tentang komponen React dan fasa yang berbeza dalam kitaran hidup. Saya pasti pada masa anda selesai membaca blog ini anda akan mempunyai pemahaman yang lengkap mengenai komponen React dan konsep-konsep di sekitarnya. Tetapi sebelum meneruskan, perhatikan topik yang akan saya bincangkan:

• Apa itu React Components?
• Kelebihan Komponen Reaksi
• Props
• Negeri
• Negeri vs Alat Peraga
• Kitaran Hidup Komponen React

Apa itu React Components?

Sebelumnya para pembangun harus menulis 1000 baris kod untuk mengembangkan aplikasi satu halaman sederhana. Sebilangan besar aplikasi tersebut mengikuti struktur DOM tradisional dan membuat perubahan terhadapnya sangat mencabar dan tugas yang membosankan bagi para pembangun.Mereka secara manual harus mencari elemen yang memerlukan perubahan dan memperbaruinya dengan sewajarnya. Bahkan kesalahan kecil akan menyebabkan kegagalan aplikasi. Lebih-lebih lagi, mengemas kini DOM sangat mahal. Oleh itu, pendekatan berasaskan komponen diperkenalkan. Dalam pendekatan ini, keseluruhan aplikasi dibahagikan kepada potongan logik yang disebut Komponen. React adalah salah satu kerangka yang memilih pendekatan ini.Sekiranya anda merancang untuk membina karier anda dalam pembangunan web, permulaan awal akan membuka banyak peluang untuk anda.

Mari kita fahami apa komponen ini.

Komponen tindak balas dianggap sebagai blok bangunan antara muka pengguna. Setiap komponen ini wujud dalam ruang yang sama tetapi dapat dilaksanakan secara bebas antara satu sama lain. Komponen react mempunyai struktur, kaedah dan API mereka sendiri. Mereka dapat digunakan kembali dan dapat disuntikkan ke antara muka sesuai keperluan. Untuk mempunyai pemahaman yang lebih baik, anggap keseluruhan UI sebagai pokok.Di sini komponen permulaan menjadi akar dan setiap bahagian bebas menjadi cabang, yang selanjutnya dibahagikan kepada sub-cabang.

Ini menjadikan UI kami teratur dan membolehkan perubahan data dan keadaan secara logik mengalir dari akar ke cabang dan kemudian ke sub-cabang. Komponen membuat panggilan ke pelayan terus dari sisi pelanggan yang membolehkan DOM mengemas kini secara dinamik tanpa memuat semula halaman. Ini kerana komponen reaksi dibina berdasarkan konsep permintaan AJAX. Setiap komponen mempunyai antara muka tersendiri yang dapat membuat panggilan ke pelayan dan memperbaruinya. Oleh kerana komponen ini saling bergantung antara satu sama lain, masing-masing dapat menyegarkan semula tanpa mempengaruhi yang lain atau UI secara keseluruhan.

Kami guna React.createClass () kaedah untuk membuat komponen. Kaedah ini mesti diberikan argumen objek yang akan menentukan komponen React. Setiap komponen mesti mengandungi satu membuat () kaedah. Ini adalah harta terpenting dari komponen yang bertanggungjawab menguraikan HTML dalam JavaScript, JSX. Ini membuat () akan mengembalikan perwakilan HTML komponen sebagai nod DOM. Oleh itu, semua tag HTML mesti dilampirkan dalam tag lampiran di dalam membuat () .

Berikut adalah contoh kod untuk membuat komponen.

siri fibonacci dalam c ++

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

Negeri vs Alat Peraga

Kitaran Hidup Komponen React

React menyediakan pelbagai kaedah yang memberitahu ketika tahap tertentu dalam kitaran hidup komponen berlaku. Kaedah ini dipanggil kaedah kitaran hidup. Kaedah kitaran hayat ini tidak begitu rumit. Anda boleh memikirkan kaedah ini sebagai pengendali acara khusus yang dipanggil pada pelbagai titik semasa hayat komponen. Anda bahkan boleh menambahkan kod anda sendiri ke kaedah ini untuk melakukan pelbagai tugas. Bercakap mengenai kitaran hidup komponen, kitaran hidup dibahagikan kepada 4 fasa. Mereka adalah:

1. Fasa Permulaan
2. Mengemas kini Fasa
3. Props berubah Fasa
4. Fasa Pemasangan

Setiap fasa ini mengandungi beberapa kaedah kitaran hidup yang hanya khusus untuknya. Oleh itu, mari kita cari tahu apa yang berlaku dalam setiap fasa ini.

a. Fasa Permulaan - Fasa pertama kitaran hidup komponen React adalah fasa awal atau fasa rendering awal. Dalam fasa ini,komponen akan memulakan perjalanannya dan menuju ke DOM. Fasa ini terdiri daripada kaedah berikut yang digunakan mengikut urutan yang telah ditentukan.

1. getDefaultProps (): Kaedah ini digunakan untuk menentukan nilai lalai ini.prop . Ia dipanggil sebelum komponen anda dibuat atau alat peraga dari ibu bapa diserahkan ke dalamnya.
2. getInitialState (): Kaedah ini digunakan untuknyatakan nilai lalai bagi negeri ini sebelum komponen anda dibuat.
3. komponenWillMount (): Ini adalah kaedah terakhir yang boleh anda panggil sebelum komponen anda dimasukkan ke dalam DOM. Tetapi jika anda memanggil setState () dalam kaedah ini komponen anda tidak akan dibuat semula.
4. berikan (): Th adalah kaedah yang bertanggungjawab untuk mengembalikan satu simpul HTML root dan mesti ditentukan dalam setiap komponen. Anda boleh kembali batal atau salah sekiranya anda tidak mahu memberikan apa-apa.
5. komponenDidMount (): Setelah komponen diberikan dan diletakkan di DOM, ini kaedah disebut. Di sini anda boleh melakukan sebarang operasi pertanyaan DOM.

b. Mengemas kini Fasa - Setelah komponen ditambahkan ke DOM, mereka dapat mengemas kini dan memberikan kembali hanya ketika perubahan keadaan terjadi. Setiap kali keadaan berubah, komponen memanggilnya membuat () lagi. Sebarang komponen, yang bergantung pada output komponen ini juga akan memanggilnya membuat () lagi. Ini dilakukan, untuk memastikan komponen kami memaparkan versi terbarunya. Untuk berjaya mengemas kini komponen, nyatakan kaedah berikut dipanggil mengikut urutan yang diberikan:

1. harusComponentUpdate (): Dengan menggunakan kaedah ini, anda dapat mengawal tingkah laku komponen anda untuk mengemas kini dirinya sendiri. Sekiranya anda mengembalikan yang benar dari kaedah ini,komponen akan dikemas kini. Jika tidak kaedah ini mengembalikan asalah, komponen akan melangkau kemas kini.
2. komponenWillUpdate (): Tkaedahnya disebut just sebelum komponen anda akan dikemas kini. Dalam kaedah ini, anda tidak dapat mengubah keadaan komponen anda dengan memanggil ini.setState .
3. berikan (): Sekiranya anda kembali palsu melalui harusComponentUpdate () , kod di dalamnya membuat () akan dipanggil semula untuk memastikan bahawa komponen anda memaparkan dirinya dengan betul.
4. komponenDidUpdate (): Setelah komponen dikemas kini dan diberikan, maka kaedah ini digunakan. Anda boleh memasukkan sebarang kod ke dalam kaedah ini, yang ingin anda laksanakan setelah komponen dikemas kini.

c. Fasa Perubahan Props - Selepas komponen telah dimasukkan ke dalam DOM, satu-satunya masa komponen akan dikemas kini, selain dari perubahan keadaan adalah ketika nilai propnya berubah. Secara praktikal fasa ini berfungsi serupa dengan fasa sebelumnya, tetapi bukannya keadaannya, ia berkaitan dengan alat peraga. Oleh itu, fasa ini hanya mempunyai satu kaedah tambahan dari Fasa Pengemaskinian.

1. komponenWillReceiveProps (): Kaedah ini mengembalikan satu argumen yang mengandungi nilai prop baru yang akan diberikan kepada komponen.
   Kaedah kitaran hidup yang selebihnya berperilaku sama dengan kaedah yang kita lihat pada fasa sebelumnya.
   
2. harusComponentUpdate ()
3. komponenWillUpdate ()
4. membuat ()
5. komponenDidUpdate ()

d.Fasa Penghantaran -Ini adalah fasa terakhir kitaran hidup komponen di mana komponen tersebut dihancurkan dan dikeluarkan dari DOM sepenuhnya. Hanya mengandungi satu kaedah:

1. komponenWillUnmount (): Setelah kaedah ini digunakan, komponen anda dikeluarkan dari DOM secara kekal.Dalam kaedah ini, Yanda boleh melakukan tugas-tugas yang berkaitan dengan pembersihan seperti membuang pendengar acara, menghentikan pemasa, dll.

Berikut adalah gambarajah kitaran hidup keseluruhan:

Ini membawa kita ke akhir blog mengenai React Components. Saya harap di blog ini saya dapat menerangkan dengan jelas apa itu React Components, bagaimana ia digunakan. Anda boleh merujuk ke blog saya di , sekiranya anda ingin mengetahui lebih lanjut mengenai ReactJS.

Sekiranya anda ingin dilatih dalam React dan ingin mengembangkan UI yang menarik sendiri, lihatlah oleh Edureka, sebuah syarikat pembelajaran dalam talian yang dipercayai dengan rangkaian lebih daripada 250,000 pelajar berpuas hati yang tersebar di seluruh dunia.

Ada soalan untuk kami? Sila sebutkan di bahagian komen dan kami akan menghubungi anda.