Siklus Hidup Komponen Bereaksi: Apa yang Perlu Anda Ketahui [2022]
Diterbitkan: 2021-01-06Di React, aplikasi dibagi menjadi bagian-bagian terkecil yang dikenal sebagai Components. Komponen dapat berupa presentasi atau wadah.
Ketika kita berbicara tentang komponen presentasi, mereka tidak memiliki logika. Mereka tertanam di dalam komponen; itu hanya memiliki UI.
Komponen kontainer adalah komponen yang menggunakan komponen presentasi dan memiliki logika bisnis di dalam komponen. Komponen seperti itu sering kali harus menyimpan objek status lokal untuk mencapai salah satu dari banyak kasus penggunaan yang mungkin menjadi tanggung jawabnya. Komponen ini menggunakan komponen presentasi sebagai komponen anak dan meneruskan data dengan menggunakan berbagai alat peraga.
Bereaksi memungkinkan Anda untuk memiliki komponen kelas atau fungsional. Pola umum yang digunakan dalam ekosistem reaksi adalah bahwa komponen presentasional adalah tipe fungsional dari komponen, dan komponen kontainer adalah tipe kelas.
Siklus hidup reaksi menunjukkan proses yang tepat yang dilalui komponen, dan alasan di balik siklus hidup komponen reaksi .
Daftar isi
Komponen Fungsional
Ini adalah yang tidak memiliki status, dan hanya manipulasi menggunakan alat peraga yang dilakukan.
Semua metode siklus hidup komponen atau setState tidak dapat digunakan atau diakses di dalam komponen tersebut.
Checkout: Bereaksi Ide Proyek
Komponen Kelas
Komponen ini dapat memiliki status lokal, dan mereka memiliki akses ke metode siklus hidup dan setState .
Komponen kelas khas dalam reaksi terlihat seperti: - 
Siklus hidup komponen memiliki tiga fase: -
- pemasangan
- Memperbarui
- Melepas
pemasangan
Ketika setiap komponen dibuat dan dimasukkan ke dalam DOM (Document Object Model), metode yang digunakan adalah:
● konstruktor()
● getDerivedStateFromProps() statis
● render()
● componentDidMount()
Memperbarui
Ketika prop atau state yang disuplai ke sebuah komponen diubah, rendering ulang komponen juga dikenal sebagai fase pemutakhiran. Dalam fase ini, diberikan di bawah ini adalah metode siklus hidup berikut yang dipanggil:
● getDerivedStateFromProps() statis
● shouldComponentUpdate()
● render()
● getSnapshotBeforeUpdate()
● componentDidUpdate()
Baca: Vue vs React: Perbedaan Antara Vue dan React
Melepas
Metode ini dipanggil selama pelepasan komponen apa pun: -
● komponen willUnmount()
Ini adalah fungsi terakhir yang dipanggil sebelum model objek dokumen dihancurkan. Ini berfungsi sebagai pembersihan untuk elemen apa pun yang dibangun selama componentWillMount.
Untuk tujuan penanganan kesalahan dalam komponen, ada beberapa metode yang dicadangkan: -
● getDerivedStateFromError() statis
● componentDidCatch()
Metode siklus hidup yang umum digunakan dijelaskan secara rinci: -
● konstruktor (alat peraga)
Metode siklus hidup ini digunakan selama fase pemasangan komponen. Seseorang dapat memiliki objek status lokal yang dideklarasikan di sini. super(props) dipanggil di dalam konstruktor sebelum pernyataan lainnya; jika tidak, terjadi kesalahan saat mengakses this.props.
Jika seseorang tidak bertujuan untuk mendeklarasikan objek status lokal atau mengikat event handler ke instance, tidak perlu menulis metode siklus hidup komponen.
Status panggilan di konstruktor() tidak disarankan karena akan memicu rendering ulang sebelum siklus sebelumnya berakhir.
Constructor() adalah satu-satunya tempat di mana seseorang dapat langsung menetapkan status. Jika tidak, jika ada kebutuhan untuk mengubah status atau menetapkan sesuatu di dalamnya, this.setSate harus digunakan.
● render()
Di dalam komponen metode ini, bagian JSX ditulis. JSX mirip dengan HTML tetapi merupakan sintaks javascript yang diperluas. Saat kita menggunakan JSX, kita juga bisa menggunakan ekspresi Javascript di dalam metode render.
Setiap metode render() komponen induk mungkin memiliki komponen anak di dalamnya. Semua mengikuti pola komposisi, yang merupakan dasar dari komponen-komponen yang bereaksi.
Setiap kali metode render induk dipanggil, render juga dimulai untuk komponen anak, dan render induk selesai hanya setelah seluruh render anak selesai.
Metode render adalah metode yang diperlukan; tanpa ini, komponen tidak dapat dibuat karena ini adalah satu-satunya tempat di mana bagian tampilan dari suatu komponen dapat ditulis.
Metode render adalah murni; ini berarti ia tidak dapat mengubah status di dalamnya.
Untuk komponen apa pun dalam fase pemutakhiran, rendering ulang untuk komponen tertentu akan terjadi atau tidak, mungkin bergantung pada jenis atau penggunaan metode siklus hidup shouldComponentUpdate() kembali.
Tidak disarankan melakukan panggilan API dan interaksi apa pun dengan browser di dalam metode ini, dan ini akan menimbulkan kesalahan.
● componentDidMount()
Metode ini dipanggil segera setelah komponen dipasang. Sekarang DOM tersedia untuk manipulasi lebih lanjut. Seseorang dapat memanggil setState di dalam metode ini.
Selain itu, interaksi dengan browser atau panggilan API dapat dilakukan dari sini.
Metode ini hanya dipanggil sekali, yaitu selama waktu pembuatan. Metode ini tidak akan berjalan di bagian render ulang lebih lanjut, dan logika di dalamnya juga tidak akan berjalan.
● componentDidUpdate()
Ini sama dengan componentDidMount.; seseorang bisa mendapatkan kesalahan dengan satu-satunya perbedaan bahwa ini hanya dipanggil ketika rendering ulang komponen terjadi. Metode ini tidak dipanggil untuk render awal.
SetState dan efek samping dapat dilakukan di dalam metode ini. Tetapi setState perlu dibungkus dalam suatu kondisi; jika tidak, seseorang mungkin berakhir di loop tak terbatas render, dan render tidak akan pernah berakhir.
Juga componentDidUpdate tidak akan dipanggil jika shouldComponentUpdate() mengembalikan false.
● componentWillUnmount()
Metode ini dipanggil ketika fase pelepasan komponen sedang berlangsung.
Di dalam metode, idealnya, penghapusan event handler dan pembersihan memori dapat dicapai.
Fungsi setState() tidak boleh dipanggil di dalam ini karena menyebabkan rendering ulang komponen.
● shouldComponentUpdate()
Saat mengembangkan aplikasi reaksi, sering ada kasus ketika seseorang harus menghindari rendering ulang komponen yang tidak perlu. Untuk mencapai komponen di dalam kelas ini, seseorang memiliki metode yang disebutkan di atas. Jika metode ini mengembalikan false, maka rendering ulang komponen dan komponen turunannya tidak akan terjadi.
Alat peraga sebelumnya dapat diperiksa dan dibandingkan dengan alat peraga baru yang disediakan untuk memastikan tidak ada perubahan, lalu kembali salah.
Memanggil metode setState() di dalam ini tidak disarankan lagi, itu akan menyebabkan rendering ulang.
Juga, efek samping tidak boleh dilakukan dalam metode ini.
Ada juga alternatif lain untuk metode ini. Seseorang dapat menggunakan React.pureComponents sambil memperluas kelas. Ini jauh lebih stabil dan andal daripada shouldComponentUpdate().
Last but not least, ada batasan kesalahan jenis komponen reaksi yang hadir untuk menangkap kesalahan.
Kita harus membungkus komponen dengan komponen batas kesalahan secara sederhana.
Di dalam komponen khusus ini, ada dua metode siklus hidup yang digunakan:-
- getDerivedStateFromError () statis
- komponenDidCatch()
Keduanya dipanggil jika ada komponen turunan yang membuat kesalahan.
Yang pertama dipanggil selama fase render, jadi tidak ada efek samping yang diizinkan di dalamnya. Yang kedua dipanggil selama fase komit, jadi efek samping diizinkan di dalamnya.
Baca Juga: Gaji Developer ReactJS di India
Pelajari Kursus Rekayasa Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.
Kesimpulan
Siklus hidup komponen reaksi menambah kerumitan pada kode, tetapi eksekusi sistematis dan manipulasi yang dilakukan melalui metode tampaknya cukup menarik dari perspektif pengembang. React lifecycle memungkinkan seseorang merestrukturisasi atau memanipulasi komponen.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang reaksi, pengembangan tumpukan penuh, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk profesional yang bekerja dan menawarkan 500+ jam pelatihan ketat, 9+ proyek , dan penugasan, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.
