Advertisement
  1. Code
  2. React

Stateful vs Stateless komponen fungsional di bereaksi

Scroll to top
Read Time: 11 min

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Bereaksi adalah perpustakaan JavaScript populer front-end untuk membangun antarmuka pengguna interaktif. Bereaksi memiliki kurva belajar yang relatif dangkal, yang merupakan salah satu alasan mengapa itu adalah mendapatkan semua perhatian akhir-akhir ini.

Meskipun ada banyak konsep penting untuk dibahas, komponen yang tak dapat disangkal hati dan jiwa dari bereaksi. Memiliki pemahaman yang baik tentang komponen harus membuat Anda hidup mudah sebagai pengembang bereaksi.

Prasyarat

Tutorial ini ditujukan untuk pemula yang baru mulai belajar bereaksi dan memerlukan gambaran yang lebih baik tentang komponen. Kita akan mulai dengan dasar-dasar komponen dan kemudian pindah ke konsep-konsep yang lebih menantang seperti pola komponen dan ketika menggunakan pola-pola tersebut. Klasifikasi komponen yang berbeda telah membahas kelas vs komponen fungsional, stateful vs stateless komponen, dan wadah vs presentasi komponen.

Sebelum memulai, saya ingin memperkenalkan Anda ke snipet kode yang kami akan menggunakan dalam tutorial ini. Ini adalah sebuah penghitung sederhana yang dibangun dengan bereaksi. Saya akan merujuk kembali ke beberapa bagian dari contoh ini seluruh tutorial.

Jadi mari kita mulai.

Apa itu Komponen? 

Komponen mandiri, mikro-entitas independen yang menjelaskan bagian dari UI. Sebuah aplikasi UI dapat dibagi menjadi lebih kecil komponen, dimana setiap komponen memiliki kode, struktur, dan API.

Facebook, misalnya, memiliki ribuan potongan fungsionalitas yang dihubungkan bersama-sama ketika Anda melihat aplikasi web mereka. Di sini adalah sebuah fakta menarik: Facebook terdiri dari komponen 30.000, dan jumlahnya bertambah. Arsitektur komponen yang memungkinkan Anda untuk memikirkan setiap bagian dalam isolasi. Masing-masing komponen dapat memperbarui segala sesuatu dalam lingkup tanpa khawatir tentang bagaimana hal itu mempengaruhi komponen lainnya.

Jika kita mengambil Facebook UI sebagai contoh, bar pencarian akan menjadi calon yang baik untuk komponen. Facebook Newsfeed akan membuat komponen lain (atau komponen yang host banyak sub komponen). Semua metode dan panggilan AJAX prihatin dengan bilah penelusuran akan dalam komponen tersebut.

Komponen juga dapat digunakan kembali. Jika Anda memerlukan komponen yang sama di beberapa tempat, yang mudah. Dengan bantuan BEJ sintaks, Anda dapat menyatakan komponen Anda ke manapun Anda ingin mereka untuk tampil, dan hanya itu.

Alat peraga dan negara

Komponen perlu data untuk bekerja dengan. Ada dua cara yang berbeda bahwa Anda bisa menggabungkan komponen dan data: sebagai props atau state. alat peraga dan negara menentukan apa komponen menuliskan dan bagaimana berperilaku. Mari kita mulai dengan props.

props

Jika komponen polos fungsi JavaScript, maka alat peraga akan fungsi input. Going oleh analogi, komponen menerima input (apa yang kita sebut alat peraga), proses itu, dan kemudian menuliskan beberapa kode BEJ.

Stateful vs Stateless Component Component with propsStateful vs Stateless Component Component with propsStateful vs Stateless Component Component with props

Meskipun data dalam alat peraga dapat diakses komponen, bereaksi filsafat adalah bahwa alat peraga harus berubah dan top-down. Apa ini berarti adalah bahwa komponen orangtua dapat meneruskan data apapun yang diinginkan untuk anak-anak sebagai alat peraga, tetapi anak komponen tidak dapat mengubah alat peraga nya. Jadi, jika Anda mencoba untuk mengedit alat peraga seperti yang saya lakukan di bawah ini, Anda akan mendapatkan "tidak dapat menetapkan untuk read-only" TypeError.

State

Negara, di sisi lain, adalah sebuah objek yang dimiliki oleh komponen mana dinyatakan. Lingkup dibatasi ke komponen saat ini. Komponen dapat menginisialisasi keadaan dan update setiap kali diperlukan. Keadaan komponen orangtua biasanya berakhir menjadi alat peraga komponen anak. Ketika negara adalah melewati lingkup saat ini, kami menyebutnya sebagai penyangga.

Stateful vs Stateless Component Component with StateStateful vs Stateless Component Component with StateStateful vs Stateless Component Component with State

Sekarang bahwa kita tahu dasar-dasar komponen, kita akan melihat pada dasar penggolongan komponen.

Komponen kelas vs komponen fungsional

Komponen bereaksi dapat dari dua jenis: komponen kelas atau komponen fungsional. Perbedaan antara keduanya jelas dari nama-nama mereka.

Komponen fungsional

Komponen fungsional yang hanya fungsi JavaScript. Mereka mengambil input opsional yang, seperti yang saya sebutkan sebelumnya, adalah apa yang kita sebut alat peraga.

Stateful vs Stateless Components Functional ComponentsStateful vs Stateless Components Functional ComponentsStateful vs Stateless Components Functional Components

Beberapa pengembang lebih memilih untuk menggunakan fungsi baru ES6 panah untuk menentukan komponen.  Arrow functions lebih kompak dan sintaks yang ringkas untuk menulis fungsi ekspresi. Dengan menggunakan fungsi Panah, kita dapat melewatkan penggunaan dua kata kunci, function dan return, dan sepasang ikal kurung. Dengan sintaks baru, Anda dapat menentukan komponen dalam satu baris seperti ini.

Komponen kelas

Komponen kelas menawarkan lebih banyak fitur, dan dengan lebih banyak fitur datang Bagasi. Alasan utama untuk memilih komponen kelas atas komponen fungsional adalah bahwa mereka dapat memiliki state.

Negara = {count: 1} sintaks adalah bagian dari fitur bidang umum kelas. Lebih di bawah ini.

Ada dua cara, bahwa Anda dapat membuat komponen kelas. Cara tradisional adalah dengan menggunakan React.createClass(). ES6 memperkenalkan gula sintaks yang memungkinkan Anda untuk menulis kelas yang memperpanjang React.Component. Namun, kedua metode dimaksudkan untuk melakukan hal yang sama.

Komponen kelas bisa ada tanpa negara juga. Berikut adalah contoh komponen kelas yang menerima input alat peraga dan menuliskan BEJ.

Kita mendefinisikan sebuah metode konstruktor yang menerima alat peraga sebagai masukan. Dalam konstruktor, kita memanggil super() untuk mewariskan apa pun yang menjadi warisan dari parent class. Berikut adalah beberapa rincian yang Anda mungkin telah terjawab.

Pertama, constructor opsional sedangkan menentukan komponen. Dalam kasus di atas, komponen yang tidak memiliki keadaan, dan konstruktor tidak muncul untuk melakukan sesuatu yang berguna. this.props yang digunakan di dalam render() akan bekerja tanpa Apakah konstruktor didefinisikan atau tidak. Namun, di sini adalah sesuatu dari dokumen resmi:

Komponen kelas harus selalu memanggil constructor dasar dengan props.

Sebagai penerapan terbaik, saya akan merekomendasikan menggunakan constructor untuk semua kelas komponen.

Kedua, jika Anda menggunakan constructor, Anda perlu untuk memanggil super(). Hal ini tidak opsional, dan Anda akan mendapatkan kesalahan sintaks "super() hilang panggilan dalam konstruktor" sebaliknya.

Dan titik terakhir saya tentang penggunaan super() vs super(props). super(props) harus digunakan jika Anda akan untuk memanggil this.props dalam konstruktor. Sebaliknya, menggunakan super() saja sudah cukup.

Stateful komponen vs Stateless komponen

Ini adalah cara populer lain untuk mengklasifikasikan komponen. Dan kriteria untuk klasifikasi sederhana: komponen yang memiliki negara dan komponen yang tidak.

Stateful komponen

Stateful komponen yang selalu komponen kelas. Seperti disebutkan sebelumnya, stateful komponen memiliki keadaan yang mendapat diinisialisasi dalam konstruktor.

Kami telah menciptakan obyek state dan diinisialisasi dengan hitungan 0. Ada sintaks alternatif yang diusulkan untuk membuat bidang mudah disebut kelas ini. Itu bukan merupakan bagian dari ECMAScript spesifikasi belum, tetapi jika Anda menggunakan Babel transpiler, sintaks ini harus bekerja dari kotak.

Anda dapat menghindari menggunakan constructor sama sekali dengan sintaks baru ini.

Kita sekarang dapat mengakses negara dalam termasuk render() metode kelas. Jika Anda akan menggunakannya dalam render() untuk menampilkan nilai count saat ini, Anda perlu tempat di dalam kurung kurawal sebagai berikut:

Kata kunci this di sini merujuk kepada contoh komponen saat ini.

Inisialisasi negara ini tidak cukup-kita perlu untuk dapat memperbarui negara untuk membuat aplikasi interaktif. Jika Anda pikir ini akan bekerja, tidak, itu tidak akan.

Komponen bereaksi dilengkapi dengan metode yang disebut setState untuk memperbarui negara. setState menerima sebuah benda yang mengandung negara baru count.

setState() menerima objek sebagai masukan, dan kami kenaikan nilai sebelumnya dari hitungan oleh 1, yang bekerja seperti yang diharapkan. Namun, ada yang menangkap. Ketika ada beberapa setState panggilan yang membaca nilai sebelumnya negara dan menulis nilai baru ke dalamnya, kita mungkin berakhir dengan kondisi balapan. Apa itu artinya bahwa hasil akhir tidak akan cocok dengan nilai yang diharapkan.

Berikut adalah contoh yang seharusnya membuat jelas untuk Anda. Coba ini dalam potongan codesandbox di atas.

Kami ingin setState untuk kenaikan menghitung dengan 100, kemudian update 1, dan kemudian menghapus 100 yang ditambahkan sebelumnya. Jika setState melakukan transisi negara dalam urutan yang sebenarnya, kita akan mendapatkan perilaku yang diharapkan. Namun, setState asynchronous, dan beberapa setState panggilan mungkin dapat batched bersama-sama untuk pengalaman UI dan kinerja yang lebih baik. Begitu kode di atas menghasilkan sebuah perilaku yang berbeda dari apa yang kita harapkan.

Oleh karena itu, daripada secara langsung lewat sebuah objek, Anda dapat melewati dalam fungsi updater yang memiliki tanda tangan:

prevState adalah referensi ke keadaan sebelumnya dan dijamin untuk akan up to date. alat peraga mengacu pada komponen alat peraga, dan kita tidak perlu alat peraga untuk memperbarui negara di sini, jadi kita bisa mengabaikan itu. Oleh karena itu, kita dapat menggunakannya untuk memperbarui negara dan menghindari kondisi ras.

SetState() rerenders komponen, dan Anda memiliki komponen stateful bekerja.

Stateless komponen

Anda dapat menggunakan fungsi atau kelas untuk menciptakan komponen kewarganegaraan. Tapi kecuali Anda perlu menggunakan lifecycle hook komponen Anda, Anda harus pergi untuk komponen fungsional tanpa kewarganegaraan. Ada banyak manfaat jika Anda memutuskan untuk menggunakan komponen fungsional stateless di sini; mereka mudah untuk menulis, mengerti, dan menguji, dan Anda bisa menghindari kata kunci this sama sekali. Namun, pada v16 bereaksi, ada tidak ada kinerja manfaat dari menggunakan komponen fungsional stateless melalui komponen kelas.

The downside adalah bahwa Anda tidak dapat memiliki siklus hidup kait. Metode lifecycle ShouldComponentUpdate() sering digunakan untuk mengoptimalkan kinerja dan manual kontrol apa mendapat rerendered. Anda tidak dapat menggunakannya dengan komponen fungsional belum. Refs juga tidak didukung.

Container komponen vs presentasi komponen

Ini adalah pola lain yang sangat berguna saat menulis komponen. Manfaat dari pendekatan ini adalah bahwa logika perilaku dipisahkan dari logika presentasi.

Presentasi komponen

Presentasi komponen yang digabungkan dengan pandangan atau bagaimana hal-hal yang terlihat. Komponen ini menerima props dari mitra wadah mereka dan membuat mereka. Segala sesuatu yang ada hubungannya dengan menggambarkan UI harus pergi di sini.

Presentasi komponen dapat digunakan kembali dan harus tetap decoupled dari lapisan perilaku. Komponen presentasi menerima data dan callback secara eksklusif melalui alat peraga dan ketika suatu peristiwa terjadi, seperti tombol yang ditekan, melakukan callback untuk container komponen melalui alat peraga untuk memohon sebuah event penanganan metode.

Komponen fungsional harus menjadi pilihan pertama untuk menulis presentasi komponen kecuali negara yang diperlukan. Jika komponen presentasi membutuhkan sebuah negara, itu harus berkaitan dengan negara UI dan data tidak aktual. Komponen presentasi tidak berinteraksi dengan toko Redux atau membuat API panggilan.

Container komponen

Container komponen akan menangani bagian perilaku. Container komponen memberitahu komponen presentasi apa harus diberikan menggunakan alat peraga. Ini tidak boleh berisi terbatas DOM markup dan gaya. Jika Anda menggunakan Redux, container komponen berisi kode yang salah satu tindakan ke toko. Selain itu, ini adalah tempat di mana Anda harus menempatkan panggilan API Anda dan menyimpan hasilnya ke dalam komponen yang negara.

Struktur yang biasa adalah bahwa ada container komponen di atas yang lolos ke data ke komponennya presentasi anak sebagai alat peraga. Ini bekerja untuk proyek-proyek kecil; Namun, ketika proyek semakin besar dan Anda memiliki banyak komponen menengah yang hanya menerima alat peraga dan memberikannya kepada anak komponen, ini akan mendapatkan jahat dan keras untuk mempertahankan. Ketika ini terjadi, lebih baik untuk membuat container komponen unik ke komponen daun, dan ini akan meringankan beban pada komponen menengah.

Jadi apa adalah PureComponent?

Anda akan mendapatkan untuk mendengar komponen murni istilah yang sangat sering dalam lingkaran bereaksi, dan kemudian ada React.PureComponent. Ketika Anda baru untuk bereaksi, Semua ini mungkin terdengar agak membingungkan. Komponen ini dikatakan murni jika itu dijamin untuk mengembalikan hasil yang sama diberikan alat peraga dan negara yang sama. Komponen fungsional adalah contoh yang baik dari sebuah komponen murni karena, diberikan masukan, Anda tahu apa yang akan diberikan.

Komponen kelas dapat murni terlalu selama mereka alat peraga dan negara yang abadi. Jika Anda memiliki komponen dengan seperangkat 'mendalam' abadi alat peraga dan negara, API bereaksi memiliki sesuatu yang disebut PureComponent. React.PureComponent mirip dengan React.Component, tetapi menerapkan metode ShouldComponentUpdate() yang sedikit berbeda. ShouldComponentUpdate() dipanggil sebelum sesuatu adalah rerendered. Tindakan standar adalah bahwa ia mengembalikan benar sehingga setiap perubahan negara atau alat peraga rerenders komponen.+

Namun, dengan PureComponent, melakukan perbandingan dangkal objek. Perbandingan dangkal berarti bahwa Anda membandingkan isi langsung objek bukan secara rekursif membandingkan semua pasangan kunci/nilai objek. Jadi hanya referensi objek dibandingkan, dan jika negara/alat peraga bermutasi, ini mungkin tidak bekerja sebagaimana dimaksud.

React.PureComponent digunakan untuk mengoptimalkan kinerja, dan tidak ada alasan mengapa Anda harus mempertimbangkan menggunakannya kecuali Anda mengalami semacam masalah kinerja.

Akhir pikiran

Stateless komponen fungsional lebih elegan dan biasanya adalah pilihan yang baik untuk membangun komponen presentasi. Karena mereka hanya fungsi, Anda tidak akan memiliki waktu sulit untuk menulis dan pemahaman mereka, dan Selain itu, mereka mati mudah untuk menguji.

Perlu dicatat bahwa komponen fungsional stateless tidak memiliki tangan atas dalam hal optimasi dan kinerja karena mereka tidak memiliki ShouldComponentUpdate() hook. Ini bisa berubah di masa depan versi bereaksi, dimana komponen fungsional mungkin akan dioptimalkan untuk kinerja yang lebih baik. Namun, jika Anda tidak kritis terhadap kinerja, Anda harus tetap untuk komponen fungsional untuk pandangan/presentasi dan komponen stateful kelas untuk wadah.

Mudah-mudahan, tutorial ini telah memberikan Anda gambaran yang tingkat tinggi arsitektur berbasis komponen dan komponen berbeda pola dalam bereaksi. Apakah pendapat Anda tentang ini? Berbagi melalui komentar.

Selama beberapa tahun terakhir, bereaksi telah tumbuh dalam popularitas. Pada kenyataannya, kita memiliki jumlah item dalam Envato pasar yang tersedia untuk pembelian, meninjau, implementasi, dan sebagainya. Jika Anda sedang mencari sumber-sumber tambahan di sekitar bereaksi, jangan ragu untuk memeriksa mereka keluar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.