Bereaksi Tutorial Bagian 19: Metode Siklus Hidup Komponen

Di bagian terjemahan React tutorial hari ini, Anda akan diberikan ikhtisar metode siklus hidup 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 34. Metode Siklus Hidup Komponen, Bagian 1

→ Asli

Salah satu fitur pengembangan aplikasi React adalah kenyataan bahwa kita menulis kode JavaScript yang cukup sederhana yang menggerakkan mekanisme internal React dan dengan demikian memberi kita peluang besar untuk mengembangkan antarmuka aplikasi dan bekerja dengan data. Pada saat yang sama, komponen yang kami gunakan selama siklus hidup mereka melewati tahap-tahap tertentu. Seringkali, apa yang terjadi pada komponen dalam aplikasi dibandingkan dengan kehidupan seseorang. Orang dilahirkan, hidup, dalam hidup mereka beberapa peristiwa penting terjadi, setelah itu mereka mati. Komponen Bereaksi dalam hal ini mirip dengan orang, karena mereka juga "lahir", "hidup" dan "mati". Ketika bekerja dengan komponen, kita dapat menanggapi apa yang terjadi pada mereka, berkat metode siklus hidup mereka yang dipanggil pada saat-saat khusus "kehidupan" mereka.

Baru-baru ini, tim pengembangan Bereaksi telah ketinggalan zaman tiga metode siklus komponen. Namun demikian, kami akan mempertimbangkan metode ini, karena mereka masih dapat digunakan, dan karena mereka dapat ditemukan dalam kode yang ada. Selain itu, dua metode siklus hidup komponen baru ditambahkan ke Bereaksi, yang akan kita bahas dalam pelajaran berikutnya.

Kami hanya akan mempertimbangkan metode yang paling penting yang paling relevan bagi mereka yang baru mulai belajar Bereaksi. Ketika Anda terus menguasai perpustakaan ini, Anda akan dapat bereksperimen dengan metode lain.

Berikut adalah beberapa bahan yang baik tentang metode siklus hidup komponen Bereaksi yang relevan sebelum Bereaksi 16.3. Di sini , dalam publikasi dari blog resmi Bereaksi pengembang, Anda dapat mengetahui tentang perubahan yang telah terjadi di Bereaksi 16.3.

Sekarang, mari kita mulai diskusi tentang metode siklus hidup dari komponen Bereaksi yang paling sering Anda temui.

Kami akan, seperti biasa, menggunakan proyek demo di sini. Dalam hal ini, kita mulai dengan proyek standar yang dibuat menggunakan create-react-app, dalam file App.js yang berisi kode berikut:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Untuk memulai, mari kita lihat metode yang telah Anda gunakan dengan komponen berbasis kelas. Ini adalah metode render() .

Seringkali, dia tidak disebutkan ketika berbicara tentang komponen metode siklus hidup. Saya pikir metode ini, ketika membandingkan komponen dengan seseorang, dapat dibandingkan dengan berpakaian sebelum pergi. Tujuan dari metode ini adalah untuk menentukan apa yang akan ditampilkan di layar, yaitu bagaimana komponen akan terlihat. Metode render() dapat dipanggil beberapa kali selama umur komponen. Jadi, ketika Bereaksi menentukan bahwa sesuatu yang berhubungan dengan komponen telah berubah, seperti keadaan atau properti, yaitu, sesuatu yang dapat mempengaruhi penampilan komponen, Bereaksi dapat memanggil metode ini. Ini bisa dibandingkan, jika kita melanjutkan analogi dengan orang, sehingga seseorang dapat memutuskan untuk berganti pakaian. Misalnya, untuk, setelah hari kerja, bersiaplah untuk semacam acara liburan.

Sekarang mari kita lihat metode siklus hidup komponen lain - componentDidMount() . Metode ini dideklarasikan, sama seperti metode komponen berbasis kelas lainnya, di tubuh kelas komponen:

 componentDidMount() { } 

Metode ini disebut pada saat siklus hidup komponen, yang dapat dibandingkan dengan "kelahiran" komponen ini. Metode ini dipicu sekali setelah komponen dipasang (dimasukkan) di pohon DOM. Dalam kasus ini, misalnya, jika setelah mengubah beberapa data yang mempengaruhi penampilan komponen, itu akan dirender kembali, metode componentDidMount() tidak akan dipanggil. Ini terjadi karena fakta bahwa ketika melakukan operasi seperti itu, komponen tidak dihapus dari pohon DOM dan kemudian dimasukkan lagi ke dalam pohon.

Metode componentDidMount() biasanya digunakan untuk melakukan panggilan ke API tertentu jika pengembang membutuhkan data dari sumber eksternal. Misalkan komponen yang kita pertimbangkan di sini sebenarnya disebut TodoList dan merupakan komponen yang membentuk daftar yang harus dilakukan dalam aplikasi Todo. Metode componentDidMount() seperti itu dapat memuat bahan dari database server yang diperlukan untuk tampilan yang benar dari daftar yang harus dilakukan yang disimpan di server. Akibatnya, setelah pemasangan komponen selesai, kami, dalam metode componentDidMount() , dapat memuat data yang diperlukan agar komponen dapat ditampilkan dengan benar di halaman. Kami juga akan berbicara tentang memuat data yang diperlukan oleh komponen, tetapi untuk sekarang Anda dapat mengingat bahwa ini adalah kasus penggunaan paling umum untuk componentDidMount() .

Metode siklus hidup komponen berikutnya yang kita bahas disebut componentWillReceiveProps() . Metode ini dapat dibandingkan dengan apa yang terjadi ketika seseorang menerima hadiah dari seseorang. Jadi, komponen dapat menerima properti dari komponen induk. Setiap kali komponen mengambil properti, metode ini disebut. Pada saat yang sama, metode ini dipanggil setiap kali komponen induk meneruskan properti ke komponen anak, dan tidak hanya ketika ini terjadi untuk pertama kalinya. Misalnya, jika komponen induk memutuskan untuk mengubah properti yang diteruskan ke komponen turunan, maka, dalam metode componentWillReceiveProps() , kita dapat, misalnya, memeriksa apakah properti baru berbeda dari yang sudah diteruskan ke komponen. Faktanya adalah bahwa jika properti baru tidak berbeda dari yang lama, ini berarti bahwa penerimaan mereka tidak mengubah apa pun, yang berarti bahwa, setelah mengetahuinya, kita tidak bisa berbuat apa-apa lagi. Jika properti baru berbeda dari yang lama, kami dapat melakukan tindakan tertentu. Biasanya, metode ini dideklarasikan di tubuh kelas komponen sebagai berikut:

 componentWillReceiveProps(nextProps) { } 

Ini biasanya digunakan, sebagai nama parameter, nextProps , tetapi Anda dapat memberi nama parameter ini sesuka Anda. Untuk membandingkan beberapa properti tertentu yang sudah ditransfer ke komponen dengan apa yang sudah diteruskan sebelumnya, dan memutuskan tindakan lebih lanjut, Anda dapat menggunakan konstruksi ini:

 componentWillReceiveProps(nextProps) {   if (nextProps.whatever !== this.props.whatever) {       //   -    } } 

Biasanya metode ini digunakan seperti itu.

Namun, seperti yang telah disebutkan, setelah rilis Bereaksi 16.3, beberapa metode siklus hidup komponen tidak digunakan lagi, dan componentWillReceiveProps() adalah salah satu metode tersebut.

Sampai Bereaksi 17, metode warisan ini masih dapat digunakan, meskipun lebih baik tidak melakukannya. Jika Anda tidak dapat melakukannya tanpa metode yang dipermasalahkan, Anda perlu menyebutnya UNSAFE_componentWillReceiveProps() . Mengikuti Bereaksi 17, nama metode componentWillReceiveProps() tidak akan berarti sesuatu yang istimewa.

Sangat berguna untuk mengetahui tentang metode ini agar dapat memahami kode yang sudah ketinggalan zaman, tetapi tidak akan digunakan dalam pengembangan aplikasi Bereaksi modern.

Metode siklus hidup komponen lain yang menarik disebut shouldComponentUpdate() . Dia, jika kita terus membandingkan komponen dengan seseorang, ingat saat ketika seseorang berpikir tentang apakah dia perlu berganti pakaian atau tidak. Dalam kondisi normal, jika Bereaksi tidak sepenuhnya yakin apakah akan merender ulang suatu komponen, itu akan membuatnya untuk berjaga-jaga. Tidak masalah apakah ini perlu, sesuai dengan logika aplikasi, atau tidak.

Ini menyebabkan Bereaksi untuk merender ulang komponen, bahkan ketika tidak ada yang terkait dengan perubahan komponen. Ini dapat memperlambat aplikasi, karena dengan prinsip ini Bereaksi memproses semua komponen yang membentuk aplikasi. Metode shouldComponentUpdate() memungkinkan pengembang untuk mengoptimalkan aplikasi. Di sini Anda dapat menerapkan beberapa logika yang membantu untuk mengetahui perlunya memperbarui komponen. Metode ini biasanya dinyatakan seperti ini:

 shouldComponentUpdate(nextProps, nextState) {   //  true        //  false    } 

Selain itu, dari metode ini, jika komponen perlu dirender ulang, dengan mempertimbangkan properti dan status baru, Anda harus mengembalikan true . Kalau tidak, false harus dikembalikan darinya. Sebenarnya, mengembalikan false dari metode ini mengarah pada fakta bahwa komponen tidak diperbarui dan aplikasi berjalan lebih cepat, tetapi dengan melakukan ini, Anda perlu memastikan bahwa komponen tidak benar-benar perlu dirender ulang. Jika komponen perlu diperbarui, dan metode ini kembali false , ini akan menyebabkan kesalahan yang akan sulit dihadapi.

Metode siklus hidup komponen lain yang akan kita bicarakan disebut componentWillUnmount() . Metode ini menandai akhir dari "masa hidup" komponen - saat ketika dihapus dari pohon DOM dan menghilang dari layar.

Metode ini terutama digunakan untuk membebaskan sumber daya yang ditempati oleh komponen dan menertibkan sebelum menghapusnya. Misalnya, jika metode componentDidMount() dikonfigurasikan dengan sesuatu seperti pendengar peristiwa, yang karenanya, ketika pengguna menggulir halaman, beberapa kode dieksekusi, itu adalah dalam componentWillUnmount() Anda dapat menghapus pendengar acara tersebut. Bahkan, metode ini memiliki banyak aplikasi yang bertujuan untuk menghapus segala sesuatu dari aplikasi yang ternyata tidak diperlukan setelah komponen hilang.

Berikut ini adalah kode lengkap komponen App kami, di mana metode siklus hidup ditambahkan:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       //  ,        }     componentWillReceiveProps(nextProps) {       if (nextProps.whatever !== this.props.whatever) {           //   -        }   }     shouldComponentUpdate(nextProps, nextState) {       //  true            //  false      }     componentWillUnmount() {       //            // ( -   )   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Ini menyimpulkan pelajaran ini, meskipun harus dicatat bahwa metode siklus hidup dari komponen Bereaksi tidak terbatas pada yang kami ulas hari ini.

Pelajaran 35. Metode Siklus Hidup Komponen, Bagian 2

→ Asli

Seperti yang telah disebutkan dalam pelajaran sebelumnya, ketika Bereaksi 16.3 keluar, dilaporkan bahwa tiga metode siklus hidup komponen sudah usang. Metode-metode ini adalah componentWillMount() , componentWillReceiveProps() dan componentWillUpdate() . Dua metode baru juga dilaporkan. Ini adalah metode getDerivedStateFromProps() statis dan metode getSnapshotBeforeUpdate() . Tidak dapat dikatakan bahwa metode ini akan memainkan peran penting dalam kelas-kelas yang akan datang dari kursus ini, tetapi meskipun demikian, kita akan mengenalnya di sini.

Kami akan bereksperimen dalam proyek yang sama yang kami gunakan terakhir kali.

Berikut ini deklarasi metode getDerivedStateFromProps() :

 static getDerivedStateFromProps(props, state) { } 

Catat static sebelum nama metode. Dia, berdasarkan properti yang diterima olehnya, harus mengembalikan keadaan yang diperbarui. Ini digunakan dalam kasus-kasus ketika komponen tertentu harus menerima properti yang masuk yang diterima dari komponen induk dan mengkonfigurasi keadaannya berdasarkan properti ini. Detail tentang metode ini dapat ditemukan di sini . Materi ini, yang diterbitkan di blog React, mengatakan bahwa penggunaan metode ini jauh dari dibenarkan dalam semua situasi yang tampaknya bermanfaat. Penggunaannya yang tidak tepat dapat menyebabkan berbagai kesalahan, hingga penurunan kinerja aplikasi, jadi gunakan dengan hati-hati. Anda seharusnya tidak mencoba memecahkan masalah dengan bantuannya, untuk solusi yang tidak dimaksudkan. Berikut adalah dokumentasi untuk metode ini.

Sekarang mari kita bicara tentang metode getSnapshotBeforeUpdate() . Inilah deklarasi yang terlihat di badan kelas:

 getSnapshotBeforeUpdate() { } 

Ini dapat dianggap sebagai metode siklus hidup yang memungkinkan Anda untuk membuat sesuatu seperti cadangan dari apa yang ada di komponen sebelum memperbaruinya. Ini menyerupai snapshot keadaan aplikasi. Perlu dicatat bahwa pengembang Bereaksi mengatakan bahwa ruang lingkup metode ini terbatas. Ini dokumentasi untuknya.

Ringkasan

Hari ini kita berbicara tentang metode siklus hidup komponen. Ketika Anda maju dalam pengembangan aplikasi Bereaksi, mereka pasti akan berguna. Di kelas lebih lanjut dari kursus ini, kita akan bertemu dengan metode ini, khususnya, dengan componentDidMount() . Lain kali kita akan berbicara tentang rendering bersyarat.

Pembaca yang budiman! Jika Anda mengembangkan aplikasi Bereaksi secara profesional, beri tahu kami tentang cara Anda menggunakan metode siklus hidup komponen.