Higher-Order Components
Umschließen Sie Components, um Verhalten oder Daten hinzuzufügen, ohne das Original zu verändern.
Higher-Order Components ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
HOCs definiert
Eine Higher-Order-Komponente umschließt eine andere Komponente, um Verhalten oder Daten hinzuzufügen.
In Svelte
Sie können eine Wrapper-Komponente schreiben, die eine Basiskomponente importiert und Funktionen wie Logging, Authentifizierung oder Theming hinzufügt.
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}Verwendung
Umschließen Sie Seiten, die Authentifizierung erfordern.
<WithAuth>
<Dashboard />
</WithAuth>Verhalten hinzufügen
Ein HOC kann Event-Handler hinzufügen, das Scrollverhalten beobachten oder Styles um seine untergeordneten Inhalte herum einschleusen.
Vergleich mit Komposition
HOCs sind ein Muster; Komposition mit Slots oder Snippets ist oft einfacher.
Wann HOCs verwendet werden
Für übergreifende Belange, die viele Komponenten einheitlich umschließen sollen.
Context-Provider-HOC
Ein HOC, das setContext aufruft, ist eine klare Möglichkeit, Abhängigkeiten auf einen Teilbaum zu beschränken.
Props weiterleiten
Verwenden Sie $$restProps oder rest aus $props(), um beliebige Props durchzureichen.
Performance
Wrapper fügen eine Komponentenebene hinzu; meistens ist das unproblematisch, aber achten Sie auf stark verschachtelte UIs.
Testen
HOCs lassen sich einfach testen, indem Sie den Wrapper mit verschiedenen Eingaben mounten.
Alternative: Benutzerdefinierte Stores
Manchmal ist ein benutzerdefinierter Store zusammen mit einer kleinen Komponente klarer als ein HOC.
Kurztest
Was macht ein HOC?
Zusammenfassung
HOCs umschließen Komponenten, um querschnittliche Belange hinzuzufügen. Das ist für Authentifizierung, Theming und Protokollierung über viele Seiten hinweg nützlich.
Häufig gestellte Fragen
Ist die Lektion „Higher-Order Components“ kostenlos?
Ja — der vollständige Text von „Higher-Order Components“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Higher-Order Components“?
Umschließen Sie Components, um Verhalten oder Daten hinzuzufügen, ohne das Original zu verändern. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Higher-Order Components“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Render Props mit Snippets
- Higher-Order Components
- Das Builder-Pattern für Headless UI
- Compound Components mit Context