React Tutorial Bagian 14: Workshop Komponen Berbasis Kelas, Status Komponen

Di bagian penerjemahan kursus pelatihan Bereaksi ini, kami sarankan agar Anda menyelesaikan tugas praktis bekerja dengan komponen berbasis kelas. Setelah itu, kita akan mulai menguasai konsep penting Bereaksi seperti keadaan komponen.



→ 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 25. Workshop. Komponen Berbasis Kelas

→ Asli

▍ pekerjaan

Di bawah ini adalah kode yang perlu ditempatkan di file index.js dari aplikasi Bereaksi standar yang dibuat oleh create-react-app . Ubah komponen fungsional yang akan Anda temukan dalam kode ini menjadi komponen berbasis kelas, dan di samping itu, temukan dan perbaiki bug kecil.

Kode untuk file index.js :

 import React from "react" import ReactDOM from "react-dom" // #1 function App() {   return (       <div>           <Header />           <Greeting />       </div>   ) } // #2 function Header(props) {   return (       <header>           <p>Welcome, {props.username}!</p>       </header>   ) } // #3 function Greeting() {   const date = new Date()   const hours = date.getHours()   let timeOfDay     if (hours < 12) {       timeOfDay = "morning"   } else if (hours >= 12 && hours < 17) {       timeOfDay = "afternoon"   } else {       timeOfDay = "night"   }   return (       <h1>Good {timeOfDay} to you, sir or madam!</h1>   ) } ReactDOM.render(<App />, document.getElementById("root")) 

OlSolusi

Pertama, mari kita lihat apa yang diberikan aplikasi dalam bentuk aslinya dengan membukanya di browser.


Halaman sumber browser

Anda dapat melihat bahwa baris teratas yang muncul pada halaman tidak terlihat benar. Setelah koma berikut Welcome, seharusnya ada sesuatu seperti nama pengguna.

Jika kami menganalisis kode aplikasi, ternyata komponen Header menampilkan baris ini, berharap mendapatkan properti username yang ditetapkan saat membuat instance-nya. Sebuah instance dari komponen ini dibuat dalam komponen App . Setelah mengetahui hal ini, kami akan dapat memperbaiki kesalahan yang disebutkan dalam tugas.

Perlu dicatat bahwa komponen biasanya ditempatkan di file yang berbeda, tetapi dalam kasus ini kami menggambarkan semuanya dalam satu file.

Kami melanjutkan untuk mengubah komponen fungsional App menjadi komponen berdasarkan kelas. Untuk melakukan ini, cukup bawa kodenya ke formulir ini:

 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } 

Sekarang kata kunci class datang sebelum nama komponen, maka perintah extends React.Component , setelah itu, tubuh kelas dijelaskan dalam kurung keriting. Harus ada metode render() yang mengembalikan apa yang kami kembalikan dari komponen fungsional. Komponen lainnya diproses dengan cara yang sama. Perhatikan pembangunan <Header username="vschool"/> . Di sini kita meneruskan properti username dengan nilai vschool komponen Header , dengan demikian memperbaiki kesalahan yang ada di aplikasi asli.

Seperti yang sudah Anda ketahui, komponen Header mengharapkan untuk mendapatkan properti username , dan dalam komponen fungsional properti ini diakses menggunakan konstruk props.username ( props dalam hal ini adalah argumen untuk fungsi yang menggambarkan komponen). Dalam komponen berbasis kelas, yang sama terlihat seperti this.props.username . Berikut adalah kode komponen Header didesain ulang:

 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } 

Komponen ketiga, Greeting , sedikit berbeda dari yang lain. Faktanya adalah bahwa di dalamnya, sebelum perintah return , beberapa perhitungan dilakukan. Saat mengonversinya menjadi komponen yang didasarkan pada kelas, perhitungan ini harus ditempatkan dalam metode render() sebelum perintah kembali. Berikut adalah kode untuk komponen Greeting didesain ulang:

 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } 

Perhatikan bahwa komponen ini digunakan dalam deklarasi komponen ini: class Greeting extends Component . Ini sering dilakukan demi singkatnya, tetapi agar ini berfungsi, kita perlu memperbaiki react impor react , membawanya ke formulir ini:

 import React, {Component} from "react" 

Inilah tampilan halaman aplikasi daur ulang di browser.


Halaman aplikasi didesain ulang di browser

Sebenarnya, tampilannya sama dengan halaman aplikasi asli, dan satu-satunya perbedaan nyata antara halaman-halaman ini adalah bahwa nama pengguna yang diteruskan ke komponen Header sekarang ditampilkan di baris pertama.

Berikut adalah kode lengkap untuk file index.js diproses:

 import React, {Component} from "react" import ReactDOM from "react-dom" // #1 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } // #2 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } // #3 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } ReactDOM.render(<App />, document.getElementById("root")) 

Jika pelaksanaan tugas praktis ini tidak menyebabkan Anda kesulitan - hebat. Jika Anda masih kurang nyaman dengan komponen berdasarkan kelas, luangkan waktu untuk bereksperimen dengan mereka. Misalnya, Anda dapat membuat kembali komponen berbasis kelas lagi menjadi komponen fungsional, dan kemudian melakukan transformasi terbalik.

Pelajaran 26. Status Komponen

→ Asli

Negara adalah konsep Bereaksi yang sangat penting. Jika komponen perlu menyimpan data sendiri dan mengelola data ini (berbeda dengan situasi ketika komponen induk mentransfer data ke dalamnya menggunakan mekanisme properti), gunakan status komponen. Hari ini kita melihat konsep dasar tentang keadaan komponen.

Status hanyalah data yang dikontrol komponen. Secara khusus, ini berarti bahwa komponen dapat mengubah data ini. Pada saat yang sama, properti yang sudah akrab bagi kami, yang diperoleh oleh komponen dari komponen induk, tidak dapat diubah oleh komponen penerima. Mereka, menurut dokumentasi Bereaksi, tidak berubah (tidak berubah). Misalnya, jika kita mencoba, dalam komponen yang didasarkan pada kelas, untuk menggunakan konstruk seperti this.props.name = "NoName" , kita akan menjumpai pesan kesalahan.

Perlu dicatat bahwa jika beberapa komponen perlu bekerja dengan keadaan, maka itu harus menjadi komponen berdasarkan kelas. Mari kita bicara tentang cara melengkapi komponen dengan keadaan dengan memulai dengan fragmen kode berikut, yang merupakan isi file App.js dari proyek standar yang dibuat menggunakan create-react-app :

 import React from "react" class App extends React.Component {   render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } export default App 

Seperti inilah tampilan halaman aplikasi di browser.


Halaman aplikasi di browser

Untuk melengkapi komponen dengan keadaan, Anda harus terlebih dahulu membuat konstruktor kelas. Sepertinya metode kelas constructor() . Setelah itu, kode komponen akan terlihat seperti ini:

 class App extends React.Component {   constructor() {         }     render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } Constructor() 

Ini adalah metode khusus yang dibangun dalam JavaScript yang dirancang untuk membuat dan menginisialisasi objek berdasarkan kelas. Sebenarnya, jika Anda perlu menginisialisasi sesuatu ketika membuat objek, operasi yang sesuai dilakukan persis dalam metode constructor() .

Hal pertama yang harus dilakukan dalam kode konstruktor adalah memanggil konstruktor dari kelas induk. Ini dilakukan dengan menggunakan fungsi super() . Dalam konstruktor dari kelas induk, operasi inisialisasi tertentu dapat dilakukan, yang hasilnya akan berguna untuk objek kita. Beginilah konstruktor kelas kita sekarang akan terlihat seperti:

 constructor() {   super() } 

Sekarang, untuk melengkapi komponen dengan keadaan, kita perlu, dalam konstruktor, untuk menambahkan properti state ke instance kelas. Properti ini adalah objek:

 constructor() {   super()   this.state = {} } 

Di sini kita menginisialisasi dengan objek kosong. Anda dapat bekerja dengan status dalam kode komponen menggunakan konstruk this.state . Tambahkan properti baru ke negara:

 constructor() {   super()   this.state = {       answer: "Yes"   } } 

Sekarang mari kita pikirkan tentang bagaimana menggunakan apa yang disimpan dalam status dalam kode. Ingatlah bahwa komponen menampilkan pertanyaan. Is state important to know? . Negara menyimpan jawaban untuk pertanyaan ini. Untuk menambahkan jawaban ini setelah pertanyaan, Anda harus melakukan hal yang sama seperti yang biasa kami lakukan dengan menambahkan konstruksi JavaScript ke kode JSX. Yaitu, tambahkan konstruksi {this.state.answer} ke akhir baris. Akibatnya, kode komponen lengkap akan terlihat seperti ini:

 class App extends React.Component {   constructor() {       super()       this.state = {           answer: "Yes"       }   }     render() {       return (           <div>               <h1>Is state important to know? {this.state.answer}</h1>           </div>       )   } } 

Dan inilah tampilan halaman aplikasi di browser.


Halaman aplikasi di browser

Di sini saya ingin mencatat bahwa keadaan yang diterima komponen selama inisialisasi dapat diubah selama pengoperasian komponen. Selain itu, komponen dapat melewati status ke komponen turunan menggunakan mekanisme bekerja dengan properti yang sudah Anda ketahui. Misalnya, dalam kasus kami, jika kami berasumsi bahwa ada komponen ChildComponent tertentu, data dari negara bagian dapat ditransfer ke sana seperti ini:

 <ChildComponent answer={this.state.answer}/> 

Meskipun kami tidak akan berbicara secara rinci tentang cara mengubah data yang disimpan dalam keadaan komponen. Kami hanya mencatat bahwa ketika Anda memanggil metode setState() , yang digunakan untuk menyelesaikan masalah ini, tidak hanya status komponen yang akan diubah, tetapi juga status data yang dikirim melalui mekanisme properti ke komponen turunannya akan diperbarui. Selain itu, mengubah status akan menyebabkan data dari status yang ditampilkan pada halaman aplikasi berubah secara otomatis.

Ringkasan

Hari ini Anda memiliki kesempatan untuk bekerja dengan komponen berbasis kelas. Selain itu, pengantar Anda untuk konsep status komponen dimulai di sini. Lain kali, Anda akan menemukan tugas-tugas praktis untuk bekerja dengan negara.

Pembaca yang budiman! Jika Anda menggunakan Bereaksi dalam praktik, beri tahu kami tentang cara Anda mengelola status komponen. Apakah Anda menggunakan alat Bereaksi standar atau sesuatu yang lain?