Bereaksi Tutorial Bagian 13: Komponen Berbasis Kelas

Hari ini kami menerbitkan terjemahan tutorial Bereaksi berikutnya. Ini berfokus pada komponen berbasis kelas. Komponen semacam itu dibuat menggunakan kata kunci kelas.



→ Bagian 1: ikhtisar kursus, alasan popularitas React, ReactDOM dan JSX
→ Bagian 2: komponen fungsional
→ Bagian 3: file komponen, struktur proyek
→ Bagian 4: komponen induk dan anak
→ Bagian 5: mulai bekerja pada aplikasi TODO, dasar-dasar gaya
→ Bagian 6: tentang beberapa fitur kursus, JSX dan JavaScript
→ Bagian 7: gaya inline
→ Bagian 8: terus bekerja pada aplikasi TODO, terbiasa dengan sifat-sifat komponen
→ Bagian 9: properti komponen
→ Bagian 10: Workshop bekerja dengan properti komponen dan gaya
→ Bagian 11: pembuatan markup dinamis dan metode susunan peta
→ Bagian 12: lokakarya, pekerjaan tahap ketiga pada aplikasi TODO
→ Bagian 13: komponen berbasis kelas
→ Bagian 14: lokakarya tentang komponen berbasis kelas, status komponen
→ Bagian 15: bengkel kesehatan komponen
→ Bagian 16: tahap keempat dari pengerjaan aplikasi TODO, penanganan acara
→ Bagian 17: tahap kelima bekerja pada aplikasi TODO, memodifikasi status komponen
→ Bagian 18: tahap keenam dari pengerjaan aplikasi TODO
→ Bagian 19: metode siklus hidup komponen
Bagian 20: pelajaran pertama dalam rendering bersyarat
→ Bagian 21: pelajaran kedua dan lokakarya tentang rendering bersyarat
→ Bagian 22: tahap ketujuh bekerja pada aplikasi TODO, mengunduh data dari sumber eksternal
→ Bagian 23: pelajaran pertama tentang bekerja dengan formulir
→ Bagian 24: Pelajaran Bentuk Kedua
→ Bagian 25: Workshop bekerja dengan formulir
→ Bagian 26: arsitektur aplikasi, pola Container / Komponen
→ Bagian 27: proyek kursus

Pelajaran 24. Komponen Berbasis Kelas

→ Asli

Jika Anda, sebelum mulai menguasai kursus pelatihan ini, mempelajari Bereaksi atas dasar beberapa kursus lain, Anda mungkin memiliki pertanyaan tentang fakta bahwa kami menggunakan komponen fungsional di sini. Faktanya adalah bahwa dalam banyak kursus lain topik ini tidak tercakup, atau komponen fungsional dibicarakan sebagai sesuatu yang tidak terlalu diperlukan. Beberapa penulis bahkan melangkah lebih jauh dan mengatakan bahwa lebih baik tidak menggunakan komponen fungsional, lebih memilih komponen berbasis kelas. Ini, menurut mereka, menyelamatkan programmer dari beban yang tidak perlu. Saya percaya bahwa siapa pun yang mempelajari Bereaksi akan merasa berguna untuk melihat gambaran lengkap dan belajar tentang pendekatan komponen yang populer saat ini. Secara khusus, sekarang arahnya relevan, yang menurutnya komponen fungsional digunakan sedapat mungkin, dan komponen berbasis kelas hanya di mana mereka benar-benar dibutuhkan. Perlu dicatat bahwa semua ini hanyalah rekomendasi. Setiap pengembang memutuskan dengan tepat bagaimana ia akan merancang aplikasinya.

Ketika saya mengajar mata kuliah React, saya lebih suka memulai dengan komponen fungsional, karena fungsi merupakan konstruk yang jelas. Pandangan sekilas pada komponen fungsional sudah cukup untuk memahami tindakan apa yang dilakukannya. Katakanlah, ini adalah kode komponen fungsional, yang merupakan fungsi reguler yang mengembalikan elemen <div> yang mengandung elemen <h1> dengan beberapa teks.

 function App() {   return (       <div>           <h1>Code goes here</h1>       </div>   ) } 

Tetapi, ketika kita mempelajari lebih dalam tentang React, berkenalan dengan kemampuannya, ternyata komponen fungsional tidak mampu menawarkan segala yang kita butuhkan dari komponen-komponen React. Karenanya, hari ini kita akan berbicara tentang komponen berbasis kelas. Yaitu, mari kita mulai dengan membuat komponen berdasarkan kelas yang melakukan tindakan yang sama dengan komponen fungsional di atas. Dalam pelajaran berikutnya, kita akan menyentuh fitur-fitur tambahan yang memberi kita komponen berbasis kelas. Secara khusus, kita berbicara tentang kemungkinan bekerja dengan keadaan komponen dan dengan metode siklus hidup mereka.

Mengubah komponen fungsional menjadi komponen berdasarkan kelas. Jika Anda tidak terlalu mengenal kata kunci class , yang muncul di ES6, dan dengan kemungkinan terbuka untuk pengembang, disarankan agar Anda meluangkan waktu untuk mengenal kelas dengan lebih baik.

Deskripsi komponen berbasis class dimulai dengan kata kunci class . Kemudian muncul nama komponen, disusun sesuai dengan aturan yang sama dengan nama-nama komponen fungsional. Pada saat yang sama, setelah konstruksi seperti class App tidak akan menjadi sesuatu seperti brace, tetapi konstruksi formulir extends React.Component . Setelah itu pasang sepasang kurung kurawal di mana tubuh kelas akan dijelaskan.

Kelas dalam JavaScript adalah tambahan untuk model pewarisan prototipe tradisional. Inti dari pembangunan class App extends React.Component adalah bahwa kita mendeklarasikan kelas baru dan menunjukkan bahwa prototipenya harus React.Component . Kehadiran prototipe ini di komponen kami memungkinkan kami untuk menggunakan semua fitur berguna yang tersedia di React.Component dalam komponen ini.

Jadi, pada tahap ini pekerjaan pada komponen berdasarkan kelas, kodenya terlihat seperti ini:

 class App extends React.Component {  } 

Komponen berbasis kelas harus memiliki setidaknya satu metode. Ini adalah metode render() . Metode ini harus mengembalikan sama dengan yang biasanya kita kembali dari komponen fungsional. Ini adalah tampilan kode lengkap komponen berbasis kelas, menerapkan fitur yang sama dengan komponen fungsional di atas.

 class App extends React.Component {   render() {       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

Bekerja dengan komponen berbasis kelas dengan cara yang sama seperti komponen fungsional. Artinya, dalam kasus kami, cukup untuk mengganti kode komponen fungsional dengan kode baru dan aplikasi akan berfungsi seperti sebelumnya.

Mari kita bicara tentang metode render() . Jika, sebelum membentuk elemen yang dikembalikan oleh metode ini, Anda perlu melakukan beberapa perhitungan, mereka dilakukan dalam metode ini, sebelum perintah return . Artinya, jika Anda memiliki beberapa kode yang menentukan urutan di mana presentasi visual komponen terbentuk, kode ini harus ditempatkan dalam metode render . Misalnya, di sini Anda dapat menyesuaikan gaya jika Anda menggunakan gaya bawaan. Akan ada juga kode yang mengimplementasikan mekanisme render bersyarat, dan konstruksi serupa lainnya.
Jika Anda terbiasa dengan kelas, Anda bisa membuat metode Anda sendiri dan menempatkan kode yang menyiapkan komponen untuk visualisasi di dalamnya, dan kemudian memanggil metode ini dalam metode render . Ini terlihat seperti ini:

 class App extends React.Component {     yourMethodHere() {         }     render() {       const style = this.yourMethodHere()       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

Yaitu, di sini kita melanjutkan dari asumsi bahwa dalam metode yourMethodHere() gaya dihasilkan, dan bahwa pengembaliannya ditulis ke konstanta style dinyatakan dalam metode render() . Harap perhatikan bahwa kata kunci this digunakan untuk mengakses metode kami sendiri. Nanti kita akan berbicara tentang fitur kata kunci ini, tetapi untuk sekarang mari kita fokus pada desain yang disajikan di sini.

Sekarang mari kita bicara tentang cara bekerja dengan properti yang diteruskan ke kelas ketika membuat contoh mereka dalam komponen berbasis kelas.

Saat menggunakan komponen fungsional, kami mendeklarasikan fungsi terkait dengan parameter props , yang merupakan objek yang menerima apa yang diteruskan ke komponen saat instantiated. Ini terlihat seperti ini:

 function App(props) {   return (       <div>           <h1>{props.whatever}</h1>       </div>   ) } 

Ketika bekerja dengan komponen berdasarkan kelas, hal yang sama terlihat seperti ini:

 class App extends React.Component {   render() {       return (           <div>               <h1>{this.props.whatever}</h1>           </div>       )   } } 

Ringkasan

Seperti yang telah disebutkan, komponen berbasis kelas memberi pengembang banyak pilihan. Kami akan berbicara lebih banyak tentang fitur-fitur ini. Dan sekarang Anda dapat bereksperimen dengan apa yang Anda pelajari hari ini dan mempersiapkan pelajaran praktis tentang komponen yang didasarkan pada kelas.

Pembaca yang budiman! Jika Anda menggunakan Bereaksi secara profesional, beri tahu kami dalam situasi apa Anda menggunakan komponen fungsional dan di mana komponen berbasis kelas.