Komponen Orde Tinggi
Bungkus komponen untuk menambahkan perilaku atau data tanpa mengubah komponen aslinya.
Komponen Orde Tinggi adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Definisi HOC
Komponen tingkat tinggi membungkus komponen lain untuk menambahkan perilaku atau data.
Di Svelte
Anda dapat menulis komponen pembungkus yang mengimpor komponen dasar dan menambahkan kemampuan (pencatatan log, autentikasi, dan tema).
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}Penggunaan
Bungkus halaman yang memerlukan autentikasi.
<WithAuth>
<Dashboard />
</WithAuth>Menambahkan Perilaku
HOC dapat memasang penangan peristiwa, mengamati pengguliran, atau menyisipkan gaya di sekitar anaknya.
Dibandingkan dengan Komposisi
HOC adalah salah satu pola; komposisi dengan slot atau cuplikan sering kali lebih sederhana.
Kapan Menggunakan HOC
Untuk perhatian lintas komponen yang harus membungkus banyak komponen secara konsisten.
HOC Penyedia Konteks
HOC yang memanggil setContext merupakan cara yang bersih untuk membatasi dependensi ke subpohon.
Meneruskan Properti
Gunakan $$restProps atau rest dari $props() untuk meneruskan properti sembarang.
Kinerja
Pembungkus menambahkan satu lapisan komponen; biasanya tidak masalah, tetapi perhatikan UI yang sangat bertingkat.
Pengujian
HOC mudah diuji dengan memasang pembungkus menggunakan berbagai masukan.
Alternatif: Store Kustom
Terkadang store kustom + komponen kecil lebih bersih daripada HOC.
Pemeriksaan Singkat
Apa yang dilakukan HOC?
Ringkasan
Komponen tingkat tinggi membungkus komponen untuk menambahkan perhatian lintas fungsi. Ini berguna untuk autentikasi, penerapan tema, dan pencatatan log di banyak halaman.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Komponen Orde Tinggi” gratis?
Ya — teks lengkap “Komponen Orde Tinggi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Komponen Orde Tinggi”?
Bungkus komponen untuk menambahkan perilaku atau data tanpa mengubah komponen aslinya. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Komponen Orde Tinggi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Render Props dengan Snippet
- Komponen Orde Tinggi
- Pola Builder untuk UI Tanpa Kepala
- Komponen Gabungan dengan Context