Svelte vs React: te same komponenty napisane w obu | We.Inc
Porównaj Svelte 5 i React na tym samym liczniku, liście, formularzu i efekcie napisanym w każdym z nich. Zobacz, czym runy różnią się od hooków i który pasuje do Twojego następnego projektu.
Svelte to kompilator: zamienia pliki .svelte w zwykły JavaScript, a stan zadeklarowany runą $state aktualizuje stronę bezpośrednio. React to biblioteka, w której funkcja komponentu uruchamia się ponownie przy każdej zmianie stanu i zwraca nowy JSX. Svelte zwykle oznacza mniej kodu na komponent; React daje większy ekosystem i większą pulę kandydatów do zatrudnienia.
Svelte 5 i React w skrócie
Temat
Svelte 5
React
Jak trafia do przeglądarki
Kompilator zamienia komponenty w JavaScript
Biblioteka ładowana w przeglądarce
Kod komponentu uruchamia się
Raz, przy tworzeniu komponentu
Ponownie przy każdym ponownym renderze
Stan lokalny
let count = $state(0)
const [count, setCount] = useState(0)
Wartość wyliczana
$derived(expression)
Zwykłe wyrażenie w ciele renderu
Efekty uboczne
$effect, zależności śledzone za Ciebie
useEffect z tablicą zależności
Propsy
let { name } = $props()
Parametry funkcji
Wiązanie dwukierunkowe
bind:value, $bindable dla propsów
value plus onChange
Obsługa kliknięcia
onclick={...}
onClick={...}
Framework full-stack
SvelteKit
Next.js i inne
Wybierz komponent poniżej i przeczytaj wersję w Svelte 5 obok wersji w React. Obie robią dokładnie to samo, więc różnica, którą widzisz, wynika wyłącznie z frameworka. Każdy fragment jest kompletny i działa bez zmian w nowym projekcie.
Wybierz jeden z czterech komponentów: licznik, listę, formularz lub efekt.
Przeczytaj plik Svelte po lewej i plik React po prawej.
Sprawdź notatkę, aby zobaczyć, którą regułę każdego frameworka pokazuje przykład.
Skopiuj dowolną wersję do nowego projektu, aby ją wypróbować.
W Svelte modyfikuj tablice i obiekty trzymane w $state bezpośrednio. W React zawsze przekazuj do settera nową tablicę lub nowy obiekt.
Nie sięgaj po $effect, aby synchronizować dwie wartości. Odpowiedzią Svelte jest wartość $derived, tak jak React sugeruje wyliczanie jej podczas renderu.
Jeśli Twój zespół zna już Reacta, argument rekrutacji i bibliotek zwykle przeważa nad mniejszymi komponentami w Svelte.
Przed pełną zmianą wypróbuj Svelte na małej stronie wewnętrznej. Łączenie obu w jednej aplikacji jest możliwe, ale rzadko się opłaca.
Najczęściej zadawane pytania
Czy Svelte jest szybszy niż React?
Nie podajemy tu liczb dotyczących szybkości, bo wyniki zależą od aplikacji i testu. Różnica strukturalna jest prawdziwa: Svelte kompiluje warstwę frameworka i aktualizuje tylko to, co się zmieniło, a React ponownie uruchamia komponenty i porównuje wynik.
Czy Svelte 5 nadal używa let dla stanu reaktywnego?
Nie samego. W Svelte 4 let na najwyższym poziomie było domyślnie reaktywne. Svelte 5 robi to jawnie: zmienna staje się reaktywna, gdy tworzysz ją przez $state.
Co jest odpowiednikiem Next.js w Svelte?
SvelteKit. Dokumentacja Svelte nazywa go towarzyszącym frameworkiem aplikacji, który dodaje routing, renderowanie po stronie serwera i ładowanie danych do komponentów Svelte.
Czy mogę używać bibliotek Reacta w Svelte?
Nie bezpośrednio. Komponenty Reacta potrzebują Reacta do renderowania. Zwykłe biblioteki JavaScript bez warstwy UI, takie jak narzędzia do dat czy walidacji, działają w obu.
Czego powinien najpierw uczyć się początkujący?
Szablony Svelte są bliższe zwykłemu HTML, więc pierwsze kroki są łagodniejsze. React ma znacznie więcej samouczków i ofert pracy. Jeśli celem jest zatrudnienie, zacznij od Reacta.
Runy kontra hooki
Svelte 5 zastąpił starszą niejawną reaktywność runami: $state, $derived, $effect, $props i $bindable. Wyglądają jak wywołania funkcji, ale są słowami kluczowymi kompilatora, więc kompilator może połączyć każdą wartość z częściami strony, które ją odczytują.
Hooki Reacta to zwykłe funkcje, które trzeba wywoływać na najwyższym poziomie komponentu, w tej samej kolejności przy każdym renderze. useState daje Ci migawkę wartości i setter, a nowa wartość pojawia się dopiero przy następnym renderze.
Efekty i zależności
$effect w Svelte śledzi każdy stan, który odczytuje synchronicznie, i uruchamia się ponownie, gdy ten stan się zmieni. Wartości odczytane po await nie są śledzone. React prosi o wymienienie każdej reaktywnej wartości w tablicy zależności useEffect, a jego linter ostrzega, gdy którejś brakuje.
Oba działają tylko w przeglądarce, nigdy podczas renderowania po stronie serwera, i oba przyjmują zwróconą funkcję czyszczącą, która uruchamia się przed następnym wykonaniem i przy odmontowaniu.
Kiedy który pasuje
Wybierz Svelte dla stron z treścią, widżetów i małych zespołów, które chcą mniej kodu i akceptują mniejszy katalog bibliotek. Wybierz React, gdy potrzebujesz konkretnej biblioteki Reacta, dużego zespołu lub frameworka takiego jak Next.js, wokół którego zbudowany jest Twój hosting.
Rozpocznij projekt w każdym z nich
Polecenia tworzące projekt
Pierwsze polecenie tworzy aplikację SvelteKit oficjalnym narzędziem sv; drugie tworzy aplikację Next.js, frameworka Reacta z najobszerniejszą dokumentacją.
Licznik
Svelte pozwala napisać count++, bo $state czyni zmienną reaktywną. React potrzebuje settera, a nowa wartość pojawia się przy następnym renderze.
Lista
Tablice w $state to głęboko reaktywne proxy, więc push aktualizuje stronę. React traktuje stan jako tylko do odczytu: skopiuj tablicę i przekaż kopię do settera.
Formularz
bind:value utrzymuje pole i zmienną w synchronizacji w obie strony. React używa kontrolowanego pola: value pochodzi ze stanu, a onChange zapisuje je z powrotem.
Efekt
Svelte sam ustala, że efekt odczytuje count. React potrzebuje count w tablicy zależności, inaczej tytuł przestałby się aktualizować.