React Tutorial Bagian 20: Pelajaran Rendering Bersyarat Pertama

Hari ini, dalam terjemahan bagian selanjutnya dari tutorial Bereaksi, kita akan berbicara tentang perenderan bersyarat.



→ 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 36. Penguraian Bersyarat, Bagian 1

→ Asli

Teknologi rendering bersyarat digunakan dalam kasus-kasus di mana sesuatu perlu ditampilkan pada halaman sesuai dengan kondisi tertentu. Dalam pelajaran ini, kita akan berbicara tentang cara menampilkan pesan khusus (itu mungkin diwakili oleh sesuatu seperti layar pemuatan) saat aplikasi sedang bersiap untuk bekerja, memuat data, dan setelah siap, bagaimana cara mengganti pesan ini untuk hal lain.

Hari ini kita akan bereksperimen dengan aplikasi yang dibuat menggunakan alat create-react-app, dalam file App.js yang berisi kode berikut:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

Selain itu, di folder yang sama di mana file App.js , ada file komponen Conditional.js dengan konten berikut:

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

Pada tahap kerja ini, aplikasi ini belum akan berfungsi, dalam proses menganalisis materi kita akan memperbaikinya.

Salah satu tantangan yang dihadapi pengembang React adalah mereka harus mempelajari banyak alat yang dapat digunakan dalam berbagai cara. Seorang programmer tidak harus terbatas hanya pada satu cara menggunakan alat tertentu. Ini dipengaruhi oleh fakta bahwa React development sangat dekat dengan pengembangan di JavaScript biasa.

Oleh karena itu, kami memiliki kesempatan untuk menggunakan pendekatan berbeda untuk menyelesaikan masalah yang sama, sehingga alat yang sama dapat digunakan dengan cara yang berbeda. Terjemahan bersyarat adalah area Bereaksi di mana ide-ide yang disebutkan di atas memanifestasikan diri mereka dengan kuat. Sebenarnya, sebelum kita mulai, saya ingin mencatat bahwa, meskipun kita akan menganalisis beberapa pendekatan untuk penerapan teknologi ini, opsi nyata untuk penggunaannya tidak terbatas pada mereka.

Mari kita bicara tentang kode yang akan kita coba sekarang. Kami, di file App.js , memiliki komponen berdasarkan kelas. Konstruktornya menginisialisasi keadaan yang mengandung properti isLoading disetel ke true . Desain seperti itu sering digunakan dalam kasus-kasus di mana, untuk membawa komponen ke dalam kondisi kerja, perlu, misalnya, untuk mengeksekusi permintaan ke API tertentu, dan sementara komponen menunggu data tiba dan mem-parsingnya, sesuatu perlu ditunjukkan di layar. Diperlukan 3-4 detik untuk menyelesaikan panggilan API, dan Anda tidak ingin pengguna melihat layar berpikir bahwa aplikasi Anda macet. Akibatnya, negara memiliki properti yang menunjukkan apakah aplikasi sedang melakukan tindakan layanan tertentu. Dan rendering bersyarat akan digunakan untuk menampilkan sesuatu yang memberi tahu pengguna bahwa aplikasi saat ini memuat sesuatu di latar belakang.

Kode komponen App memiliki metode componentDidMount() , yang akan kita bahas segera. Sementara itu, mari kita perhatikan metode render() . Di sini kita menampilkan komponen Condition , yang diimpor dalam kode yang terletak di bagian atas file App.js Komponen isLoading diteruskan ke komponen ini, yang merupakan nilai saat ini dari properti isLoading dari status komponen App . Kode komponen Conditional tidak mengembalikan apa pun yang dapat ditampilkan di layar, kami akan menangani komponen ini sedikit kemudian. Sementara itu, mari kita kembali ke metode componentDidMount() dari kode komponen App .

Ingat bahwa metode componentDidMount() memungkinkan kita untuk mengeksekusi beberapa kode segera setelah komponen, dalam kasus kami itu adalah komponen App , pertama kali ditampilkan. Dalam kode metode ini, kami mensimulasikan banding ke API tertentu. Di sini kita mengatur timer selama satu setengah detik. Ketika waktu ini berlalu, kode fungsi yang diteruskan ke setTimeout() akan diluncurkan. Dalam fungsi ini, berdasarkan asumsi bahwa panggilannya melambangkan akhir pemuatan data dari API, perubahan status dilakukan. Yaitu, properti isLoading -nya disetel ke false . Ini menandakan bahwa pengunduhan data selesai, dan setelah itu aplikasi dapat bekerja secara normal. Di kelas mendatang, kita akan berbicara tentang menggunakan fungsi fetch() untuk memuat data, untuk saat ini kita akan membatasi diri pada simulasi proses ini di atas.

Ngomong-ngomong, akan tepat di sini sekali lagi untuk mengangkat topik metode siklus hidup komponen. Faktanya adalah bahwa segera setelah properti negara isLoading berubah dari true menjadi false , komponen Conditional menerima nilai properti baru. Pertama, pertama kali komponen ditampilkan, ia menerima, di properti isLoading , true , dan kemudian, setelah keadaan berubah, ia menerima properti yang sama dengan nilai baru. Bahkan, ketika keadaan berubah, metode render() dipanggil lagi, sebagai akibatnya, komponen Conditional juga akan ditampilkan lagi. Ingatlah bahwa Conditional adalah komponen fungsional biasa, yaitu rendering ulangnya berarti panggilan fungsi yang berulang kali disajikan. Tetapi apa yang kita kembali dari fungsi ini ketika kita merender ulang komponen mungkin berbeda dari apa yang dikembalikan sebelumnya. Alasan untuk perubahan ini adalah perubahan pada apa yang kami berikan ke komponen.

Jadi, komponen Conditional menerima properti isLoading . Sebelum kita mulai bekerja pada kode, kita akan memeriksa untuk melihat apakah mekanisme yang sudah ada di dalamnya berfungsi. Untuk melakukan ini, kami akan mengembalikan beberapa markup dari komponen dan menampilkan nilai props.isLoading di konsol. Setelah itu, kode komponen akan terlihat seperti ini:

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

Halaman aplikasi setelah itu akan terlihat seperti yang ditunjukkan pada gambar berikut.


Halaman aplikasi di browser

Harap dicatat bahwa true ditampilkan di konsol segera setelah memuat aplikasi, dan false - setelah 1,5 detik. Ini karena pengoperasian mekanisme di atas dalam metode componentDidMount() komponen App .

Sekarang mari kita bicara tentang rendering bersyarat. Esensinya terletak pada kenyataan bahwa kami menampilkan sesuatu di layar hanya jika kondisi tertentu terpenuhi. Dalam hal ini, alih-alih menampilkan Temp string pada halaman, kami, dalam komponen Conditional , dapat memeriksa nilai props.isLoading , dan jika itu true , tampilkan teks Loading... pada halaman. Jika nilai ini false , yang menunjukkan akhir pengunduhan, Anda dapat mengembalikan beberapa teks lain dari komponen. Dalam kode tersebut, akan terlihat seperti ini:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

Coba jalankan kode ini di rumah Anda, segarkan halaman dan perhatikan bagaimana, ketika halaman dimuat, satu teks ditampilkan, dan setelah beberapa saat - yang lain.

Dengan fitur JavaScript yang diberikan, kami dapat menyederhanakan kode di atas seperti ini:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

Jika kondisi yang diperiksa di blok if benar, maka return di blok ini akan berfungsi, setelah itu fungsi akan selesai. Jika kondisi salah, maka ekspresi return dari blok ini tidak puas dan fungsi mengembalikan apa yang ditentukan dalam return kedua dari fungsi.

Sekarang mari kita bicara tentang bagaimana Anda dapat memecahkan masalah rendering bersyarat menggunakan operator ternary . Konstruk ini sudah ada dalam JavaScript untuk waktu yang sangat lama. Ini sering digunakan dalam Bereaksi untuk menyelesaikan tugas rendering bersyarat. Begini tampilannya:

  ? 1 : 2 

Nilai ekspresi 1 dikembalikan jika kondisinya benar, nilai ekspresi 2 dikembalikan jika kondisinya salah.

Dalam kasus kami, menggunakan operator ternary, kode komponen Conditional dapat ditulis ulang sebagai berikut:

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

Desain ini, meskipun berfungsi, terlihat tidak biasa. Faktanya adalah bahwa biasanya komponen mengembalikan desain yang lebih kompleks. Karenanya, bungkus semuanya dalam elemen <div> :

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

Kode semacam itu juga berfungsi, meskipun tidak lagi sebagaimana mestinya. Segala sesuatu yang terlampir dalam <div&gtl; . Untuk memperbaiki ini, kami ingat bahwa konstruk JS yang digunakan dalam markup yang dikembalikan dari komponen harus dilampirkan dalam kurung kurawal dan menulis ulang kode sesuai:

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

Sekarang semuanya berfungsi sebagaimana mestinya lagi.

Perlu dicatat bahwa dalam komponen nyata markup yang dikembalikan oleh mereka akan terlihat lebih rumit. Di sini, misalnya, di bagian atas dari apa yang ditampilkan oleh komponen, bilah navigasi mungkin ada, di bagian bawah sebuah "footer" halaman dapat disediakan, dan seterusnya. Ini mungkin terlihat seperti ini:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Selain itu, kehadiran dalam markup yang dikembalikan oleh komponen elemen tambahan tidak mengganggu mekanisme rendering bersyarat. Selain itu, elemen-elemen ini akan ditampilkan ketika props.isLoading true , dan ketika properti ini false .

Peningkatan lain yang dapat dibuat untuk kode ini didasarkan pada kenyataan bahwa, karena props.isLoading adalah properti boolean yang mengambil nilai true atau false , dapat digunakan secara langsung tanpa menggunakan operator perbandingan ketat dengan true . Hasilnya adalah sebagai berikut:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Sekarang kita sampai pada contoh kerja dari penggunaan teknologi rendering bersyarat, tetapi hasil yang sama dapat dicapai dengan banyak cara. Misalnya, biasanya dalam komponen seperti kita, panel navigasi dan footer halaman tidak ditampilkan. Elemen halaman seperti itu biasanya ditampilkan baik oleh komponen App itu sendiri, atau oleh komponen khusus yang ditampilkan oleh komponen App .

Selain itu, perlu dicatat bahwa di sini semua logika rendering bersyarat terletak di dalam metode render() komponen fungsional, yang dilakukan hanya untuk menunjukkan kode kompak yang dirakit di satu tempat. Tetapi, mungkin, komponen App harus bertanggung jawab atas rendering bersyarat, dan komponen yang mirip dengan komponen Conditional kami seharusnya hanya menampilkan apa yang diteruskan kepadanya. Jika komponen App bertanggung jawab untuk menentukan apakah sesuatu memuat pada titik waktu tertentu, dan ketika operasi ini selesai, maka kemungkinan besar harus bertanggung jawab untuk menentukan apa yang harus ditampilkan pada halaman. Artinya, dalam kasus kami, kode dapat ditata ulang dengan memeriksa properti isLoading dalam metode render() komponen App dan menampilkan teks seperti Loading... jika unduhan tidak selesai, atau menampilkan komponen yang mirip dengan komponen Conditional di Jika unduhan selesai. Pada saat yang sama, komponen Conditional mungkin tidak menerima properti dari App , hanya menampilkan apa yang seharusnya dihasilkan dalam kasus apa pun.

Inilah yang tampak seperti kode komponen Aplikasi, dikonversi sesuai dengan pertimbangan ini:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

Dan di sini adalah kode yang diperbarui dari komponen Conditional , di mana sekarang tidak ada verifikasi kondisi apa pun:

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

Di sini kita, bagaimanapun, menghapus bilah navigasi dan "ruang bawah tanah", tetapi ini tidak penting dalam kasus ini.

Ringkasan

Dalam pelajaran ini, pengantar pertama Anda untuk teknologi rendering bersyarat terjadi. Lain kali kita akan terus berurusan dengan mereka. Secara khusus, Anda akan memiliki pelajaran kedua tentang rendering bersyarat dan pekerjaan praktis tentang topik ini.

Pembaca yang budiman! Jika Anda mengembangkan Bereaksi aplikasi, kami meminta Anda untuk memberi tahu kami bagaimana Anda melakukan rendering bersyarat.