javascript / expert
Snippet
Manuelle Lifecycle-Verwaltung mit $effect.root
Normalerweise sind Effekte an den Lebenszyklus einer Komponente gebunden. Für globalen Zustand oder Integrationen externer Bibliotheken benötigen Sie jedoch möglicherweise Effekte, die außerhalb von Svelte-Komponenten existieren. $effect.root erstellt einen nicht verfolgten Scope, in dem Effekte unbegrenzt laufen können, bis die zurückgegebene Cleanup-Funktion manuell aufgerufen wird. Dies ist ein fortgeschrittenes Werkzeug zur Verwaltung von 'Zombie'-Effekten und zur Sicherstellung korrekter Ressourcenfreigabe in komplexer, nicht komponentenbasierter Logik.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const cleanup = $effect.root(() => {$effect(() => {console.log('Global listener active:', appState.id);// Setup external subscriptionconst unsub = socket.subscribe(appState.id, (data) => {syncInternalState(data);});return () => unsub();});return () => {console.log('Root effect destroyed');};});// Later, to stop everything manually:// cleanup();
svelte
Erklärung
1
const cleanup = $effect.root(() => {
Initialisiert einen Root-Scope, der das Erstellen von Effekten außerhalb des Lebenszyklus einer Komponente ermöglicht.
2
return () => unsub();
Standard-Effekt-Cleanup, der immer dann ausgeführt wird, wenn sich 'appState.id' innerhalb des Roots ändert.
3
cleanup();
Der manuelle Aufruf dieser Funktion zerstört den Root und alle seine internen Effekte, was Speicherlecks verhindert.