Svelte vs React: dezelfde componenten in beide geschreven | We.Inc
Vergelijk Svelte 5 en React met dezelfde teller, lijst, formulier en effect in beide geschreven. Zie hoe runes verschillen van hooks en welke past bij uw volgende project.
Svelte is een compiler: het zet .svelte-bestanden om in gewoon JavaScript, en state die met de rune $state is gedeclareerd werkt de pagina direct bij. React is een library waarin een componentfunctie bij elke statewijziging opnieuw draait en nieuwe JSX teruggeeft. Svelte betekent meestal minder code per component; React brengt het grotere ecosysteem en de grotere pool aan ontwikkelaars.
Svelte 5 en React in één oogopslag
Onderwerp
Svelte 5
React
Hoe het geleverd wordt
Compiler zet componenten om in JavaScript
Library die in de browser wordt geladen
Componentcode draait
Eén keer, als het component wordt gemaakt
Opnieuw bij elke re-render
Lokale state
let count = $state(0)
const [count, setCount] = useState(0)
Berekende waarde
$derived(expression)
Gewone expressie in de render-body
Side effects
$effect, afhankelijkheden worden voor u bijgehouden
useEffect met een dependency-array
Props
let { name } = $props()
Functieparameters
Tweerichtingsbinding
bind:value, $bindable voor props
value plus onChange
Klikhandler
onclick={...}
onClick={...}
Full-stack framework
SvelteKit
Next.js en andere
Kies hieronder een component en lees de Svelte 5-versie naast de React-versie. Beide doen precies hetzelfde, dus het verschil dat u ziet is alleen het framework. Elk fragment is compleet en draait zoals het er staat in een nieuw project.
Kies een van de vier componenten: teller, lijst, formulier of effect.
Lees het Svelte-bestand links en het React-bestand rechts.
Bekijk de notitie om te zien welke regel van elk framework het voorbeeld laat zien.
Kopieer een van beide versies naar een nieuw project om het te proberen.
Wijzig in Svelte arrays en objecten in $state direct. Geef in React altijd een nieuwe array of een nieuw object aan de setter.
Grijp niet naar $effect om twee waarden synchroon te houden. Een $derived-waarde is het antwoord van Svelte, net zoals React voorstelt om het tijdens het renderen te berekenen.
Kent uw team React al, dan weegt het argument van werving en libraries meestal zwaarder dan de kleinere Svelte-componenten.
Probeer een kleine interne pagina in Svelte voordat u volledig overstapt. Beide samen in één app gebruiken kan, maar is zelden de moeite waard.
Veelgestelde vragen
Is Svelte sneller dan React?
We noemen hier geen snelheidscijfers, omdat resultaten afhangen van de app en de test. Het structurele verschil is wel echt: Svelte compileert de frameworklaag weg en werkt alleen bij wat veranderd is, terwijl React componenten opnieuw draait en het resultaat vergelijkt.
Gebruikt Svelte 5 nog let voor reactieve state?
Niet op zichzelf. In Svelte 4 was een let op het hoogste niveau standaard reactief. Svelte 5 maakt het expliciet: een variabele wordt reactief als u hem met $state aanmaakt.
Wat is de Svelte-versie van Next.js?
SvelteKit. De Svelte-documentatie noemt het het bijbehorende applicatieframework, en het voegt routing, server-rendering en data laden toe bovenop Svelte-componenten.
Kan ik React-libraries in Svelte gebruiken?
Niet direct. React-componenten hebben React nodig om te renderen. Gewone JavaScript-libraries zonder UI-laag, zoals hulpmiddelen voor datums of validatie, werken in beide.
Welke moet een beginner eerst leren?
Svelte-templates liggen dichter bij gewone HTML, dus de eerste stappen zijn vriendelijker. React heeft veel meer tutorials en vacatures. Is werk het doel, begin dan met React.
Runes versus hooks
Svelte 5 verving de oudere impliciete reactiviteit door runes: $state, $derived, $effect, $props en $bindable. Ze zien eruit als functieaanroepen maar zijn compiler-keywords, zodat de compiler elke waarde kan koppelen aan de delen van de pagina die hem lezen.
React-hooks zijn gewone functies die op het hoogste niveau van een component moeten worden aangeroepen, bij elke render in dezelfde volgorde. useState geeft u een momentopname van de waarde en een setter, en de nieuwe waarde verschijnt pas bij de volgende render.
Effects en afhankelijkheden
Een Svelte-$effect houdt bij welke state hij synchroon leest en draait opnieuw als die state verandert. Waarden die na een await worden gelezen, worden niet bijgehouden. React vraagt u elke reactieve waarde op te sommen in de dependency-array van useEffect, en de linter waarschuwt als er een ontbreekt.
Beide draaien alleen in de browser, nooit tijdens server-rendering, en beide accepteren een teruggegeven cleanup-functie die vóór de volgende run en bij het unmounten draait.
Wanneer welke past
Kies Svelte voor contentsites, widgets en kleine teams die minder code willen en tevreden zijn met een kleinere catalogus aan libraries. Kies React als u een specifieke React-library nodig hebt, een groot team hebt, of een framework zoals Next.js waar uw hosting omheen gebouwd is.
Start in elk een project
Commando's om een project op te zetten
Het eerste commando start een SvelteKit-app met de officiële sv-tool; het tweede start een Next.js-app, het React-framework met de meeste documentatie.
Teller
In Svelte kunt u count++ schrijven omdat $state de variabele reactief maakt. React heeft de setter nodig, en de nieuwe waarde verschijnt bij de volgende render.
Lijst
Arrays in $state zijn diep reactieve proxy's, dus push werkt de pagina bij. React behandelt state als alleen-lezen: kopieer de array en geef de kopie aan de setter.
Formulier
bind:value houdt de invoer en de variabele in beide richtingen synchroon. React gebruikt een controlled input: value komt uit state en onChange schrijft het terug.
Effect
Svelte ziet zelf dat het effect count leest. React heeft count nodig in de dependency-array, anders zou de titel niet meer bijwerken.