Svelte vs React: dieselben Komponenten in beiden geschrieben | We.Inc
Vergleiche Svelte 5 und React mit demselben Zähler, derselben Liste, demselben Formular und demselben Effect in beiden. Sieh, wie sich Runes von Hooks unterscheiden und was zu deinem nächsten Projekt passt.
Svelte ist ein Compiler: Er macht aus .svelte-Dateien einfaches JavaScript, und State, der mit der Rune $state deklariert wird, aktualisiert die Seite direkt. React ist eine Bibliothek, bei der eine Komponentenfunktion bei jeder State-Änderung erneut läuft und neues JSX zurückgibt. Svelte bedeutet meist weniger Code pro Komponente; React bringt das größere Ökosystem und mehr verfügbare Entwickler mit.
Svelte 5 und React auf einen Blick
Thema
Svelte 5
React
Wie es ausgeliefert wird
Compiler macht aus Komponenten JavaScript
Bibliothek, die im Browser geladen wird
Komponentencode läuft
Einmal, wenn die Komponente erstellt wird
Erneut bei jedem Re-Render
Lokaler State
let count = $state(0)
const [count, setCount] = useState(0)
Berechneter Wert
$derived(expression)
Einfacher Ausdruck im Render-Rumpf
Seiteneffekte
$effect, Abhängigkeiten werden für dich verfolgt
useEffect mit Abhängigkeits-Array
Props
let { name } = $props()
Funktionsparameter
Zwei-Wege-Bindung
bind:value, $bindable für Props
value plus onChange
Klick-Handler
onclick={...}
onClick={...}
Full-Stack-Framework
SvelteKit
Next.js und andere
Wähle unten eine Komponente und lies die Version in Svelte 5 neben der Version in React. Beide tun exakt dasselbe, der Unterschied, den du siehst, liegt also nur am Framework. Jedes Snippet ist vollständig und läuft so, wie es geschrieben ist, in einem neuen Projekt.
Wähle eine der vier Komponenten: Zähler, Liste, Formular oder Effect.
Lies links die Svelte-Datei und rechts die React-Datei.
Sieh im Hinweis nach, welche Regel des jeweiligen Frameworks das Beispiel zeigt.
Kopiere eine der beiden Versionen in ein neues Projekt, um sie auszuprobieren.
Verändere in Svelte Arrays und Objekte in $state direkt. In React übergibst du dem Setter immer ein neues Array oder Objekt.
Greif nicht zu $effect, um zwei Werte synchron zu halten. Ein $derived-Wert ist die Antwort in Svelte, so wie React empfiehlt, ihn während des Renderns zu berechnen.
Wenn dein Team React schon kennt, überwiegt das Argument mit Personal und Bibliotheken meist die kleineren Svelte-Komponenten.
Probier Svelte an einer kleinen internen Seite aus, bevor du komplett wechselst. Beide in einer App zu kombinieren ist möglich, lohnt sich aber selten.
Häufige Fragen
Ist Svelte schneller als React?
Wir nennen hier keine Geschwindigkeitswerte, weil die Ergebnisse von App und Test abhängen. Der strukturelle Unterschied ist real: Svelte kompiliert die Framework-Schicht weg und aktualisiert nur, was sich geändert hat, während React Komponenten erneut ausführt und das Ergebnis vergleicht.
Nutzt Svelte 5 noch let für reaktiven State?
Nicht allein. In Svelte 4 war ein let auf oberster Ebene standardmäßig reaktiv. Svelte 5 macht es explizit: Eine Variable wird reaktiv, wenn du sie mit $state erstellst.
Was ist die Svelte-Variante von Next.js?
SvelteKit. Die Svelte-Dokumentation nennt es das begleitende Anwendungs-Framework, und es ergänzt Svelte-Komponenten um Routing, Server-Rendering und Datenladen.
Kann ich React-Bibliotheken in Svelte verwenden?
Nicht direkt. React-Komponenten brauchen React zum Rendern. Einfache JavaScript-Bibliotheken ohne UI-Schicht, etwa Helfer für Datum oder Validierung, funktionieren in beiden.
Was sollten Einsteiger zuerst lernen?
Svelte-Templates sind näher an einfachem HTML, daher sind die ersten Schritte sanfter. React hat weit mehr Tutorials und Stellenanzeigen. Wenn ein Job das Ziel ist, fang mit React an.
Runes gegenüber Hooks
Svelte 5 hat seine ältere implizite Reaktivität durch Runes ersetzt: $state, $derived, $effect, $props und $bindable. Sie sehen aus wie Funktionsaufrufe, sind aber Compiler-Schlüsselwörter, sodass der Compiler jeden Wert mit den Teilen der Seite verbinden kann, die ihn lesen.
React-Hooks sind gewöhnliche Funktionen, die auf oberster Ebene einer Komponente aufgerufen werden müssen, bei jedem Rendern in derselben Reihenfolge. useState gibt dir eine Momentaufnahme des Werts und einen Setter, und der neue Wert erscheint erst beim nächsten Rendern.
Effects und Abhängigkeiten
Ein $effect in Svelte verfolgt jeden State, den er synchron liest, und läuft erneut, wenn sich dieser State ändert. Werte, die nach einem await gelesen werden, werden nicht verfolgt. React verlangt, dass du jeden reaktiven Wert im Abhängigkeits-Array von useEffect aufführst, und sein Linter warnt, wenn einer fehlt.
Beide laufen nur im Browser, nie beim Server-Rendering, und beide akzeptieren eine zurückgegebene Cleanup-Funktion, die vor dem nächsten Durchlauf und beim Unmount ausgeführt wird.
Wann was passt
Wähle Svelte für Content-Websites, Widgets und kleine Teams, die weniger Code wollen und mit einem kleineren Bibliothekskatalog zufrieden sind. Wähle React, wenn du eine bestimmte React-Bibliothek, ein großes Team oder ein Framework wie Next.js brauchst, auf das dein Hosting ausgelegt ist.
Ein Projekt in beiden starten
Befehle zum Anlegen
Der erste Befehl startet eine SvelteKit-App mit dem offiziellen Tool sv; der zweite startet eine Next.js-App, das React-Framework mit der umfangreichsten Dokumentation.
Zähler
In Svelte kannst du count++ schreiben, weil $state die Variable reaktiv macht. React braucht den Setter, und der neue Wert erscheint beim nächsten Rendern.
Liste
Arrays in $state sind tief reaktive Proxys, daher aktualisiert push die Seite. React behandelt State als schreibgeschützt: Kopiere das Array und übergib die Kopie an den Setter.
Formular
bind:value hält Eingabefeld und Variable in beide Richtungen synchron. React nutzt ein kontrolliertes Eingabefeld: value kommt aus dem State, und onChange schreibt ihn zurück.
Effect
Svelte erkennt selbst, dass der Effect count liest. React braucht count im Abhängigkeits-Array, sonst würde der Titel nicht mehr aktualisiert.