Pola HOC (Komponen Pesanan Tinggi) sangat populer di kalangan pengembang Bereaksi. Tapi Vue-developer entah bagaimana memotongnya. Sangat sia-sia. Mari kita coba mencari tahu.
Apa itu HOC?
Komponen tingkat tinggi (HOC) adalah fungsi yang mengambil komponen yang ada dan mengembalikan komponen lain yang membungkus yang asli, menambahkan logika baru.
HOC vs mixins
Mungkin banyak yang akan bertanya-tanya mengapa menggunakan HOC ketika ada kotoran? Mereka juga menambahkan fungsionalitas baru ke komponen. Apa yang bisa diketahui HOC yang tidak diketahui oleh kotoran?
Pertama, ingatlah apa yang tidak murni dalam Vue (definisi diambil dari dokumentasi Vue):
Mixin adalah alat penggunaan ulang kode yang fleksibel dalam komponen Vue. Objek pengotor dapat berisi opsi komponen apa pun. Ketika pengotor digunakan oleh suatu komponen, semua opsi pengotor “dicampur” dengan opsi komponen itu sendiri.
Tampaknya tujuan kotoran dan HOC adalah sama - mereka memungkinkan Anda untuk memperluas fungsionalitas komponen yang berbeda. Dan di luar (menggunakan komponen akhir) bahkan dapat terlihat sama.
Tetapi perbedaannya terletak pada prinsip HOC dan ketidakmurnian. Kotoran "dicampur" ketika mendeklarasikan komponen - setiap instance komponen akan mengandungnya.
Menggunakan HOC, kami membungkus sebuah instance dari komponen yang tidak mengubah komponen itu sendiri, tetapi membuat yang baru di mana ia diperlukan. Ini berarti bahwa kami hanya memengaruhi potongan kode tempat kami menggunakannya. Karena ini, kami mengurangi koherensi kode, membuatnya lebih mudah dibaca dan fleksibel.
HOC agak mirip dengan pola desain dekorator .
Penciptaan HOC
Baiklah kalau begitu. Mari kita lihat semua ini dengan sebuah contoh.
Jadi, kami memiliki komponen tombol:
Setelah beberapa waktu, kami tiba-tiba harus mencatat penekanan beberapa tombol (tetapi tidak semua). Kita dapat melakukan ini melalui kotoran dengan mencampur kode untuk masuk ke komponen tombol, dan kemudian, di tempat yang tepat, mengaktifkan atau menonaktifkan penebangan melalui beberapa properti komponen. Tapi setuju, ini sangat tidak nyaman? Dan jika ada banyak fungsi seperti itu? Satu kesalahan - dan semua tombol mungkin berhenti bekerja dengan benar.
HOC dalam hal ini akan menjadi solusi yang bagus. Kami hanya membungkus tombol di beberapa tempat dengan HOC yang sesuai.
Sudah waktunya untuk mengenal HOC dalam praktek.
Langkah 1. Buat Fungsi HOC
Kita ingat bahwa HOC adalah fungsi yang mengambil komponen sebagai input dan mengembalikan yang lain. Jadi mari kita buat fungsi seperti itu. Sebut saja dengan Logger Button.
Sudah lazim untuk mulai memberi nama fungsi HOC - ini adalah semacam tanda identifikasi HOC.
Hasilnya adalah fungsi yang mengambil komponen Button sebagai input, dan kemudian mengembalikan komponen baru. Dalam fungsi render, kami menggunakan komponen asli, tetapi dengan satu perubahan - kami menambahkan acara untuk mengklik pada simpul DOM, output dari prasasti yang diklik di konsol.
Jika Anda tidak mengerti apa yang terjadi di sini, apa h dan konteksnya, maka pertama baca dokumentasi vue tentang bagaimana fungsi render bekerja.
Dalam contoh saat ini, saya menggunakan komponen fungsional, karena Saya tidak butuh syarat. Tidak ada yang melarang Anda untuk mengembalikan komponen biasa, bukan komponen fungsional, tetapi jangan lupa bahwa komponen fungsional jauh lebih cepat daripada yang biasa.
Langkah 2. Menggunakan HOC
Sekarang, menggunakan fungsi yang dihasilkan, kita cukup membuat komponen baru.
Satu-satunya yang tersisa adalah menghubungkan komponen yang diterima di mana kita perlu logging klik.
Contoh terakhir:
Komposisi
Semua ini tentu saja hebat, tetapi bagaimana jika Anda membutuhkan tombol yang tidak hanya masuk, tetapi juga melakukan beberapa tindakan lain?
Semuanya sederhana. Kami mengubah satu HOC menjadi yang lain. Kami dapat mencampur HOC sebanyak yang kami suka.
Juga untuk komposisi ada banyak fungsi dan perpustakaan siap pakai yang memfasilitasi komposisi.
HOC adalah pola yang sederhana namun sangat kuat. Ini digunakan di pangkalan banyak perpustakaan. Ini bukan peluru perak atau pengganti lengkap untuk mixin dan mekanisme pewarisan komponen. Gunakan dengan bijak dalam kombinasi dengan pola lain dan aplikasi Vue Anda akan menjadi sangat fleksibel.
Pos silang