Vergleich zwischen React- und Svelte-Frameworks: Von Rendering-Modi bis zu funktionalen Implementierungen

Wie React ist Svelte ein reaktives UI-Framework, das zum Erstellen von Front-End-Schnittstellen verwendet wird und es Entwicklern ermöglicht, Seitencode komponentenorientiert zu organisieren. Ich habe kürzlich ein Video auf YouTube gesehen, das die Unterschiede zwischen den React- und Svelte-Frameworks anhand von zehn praktischen Beispielen vergleicht. Der Inhalt ist äußerst interessant und wertvoll zum Lernen. Daher wird dieser Artikel den Inhalt des Videos organisieren und mein eigenes Verständnis hinzufügen, um eine Referenz für alle bereitzustellen und Ihnen zu helfen, ein tieferes Verständnis dieser beiden Frameworks zu erlangen.

0. Rendering-Modus

Obwohl sowohl React als auch Svelte reaktive UI-Frameworks sind, sind ihre Rendering-Modi völlig unterschiedlich. React berechnet die Teile der Seite, die über das Virtual DOM geändert werden müssen. Dies bedeutet, dass jede React-Anwendung eine integrierte Runtime benötigt, d. h. sie enthält Code zum Berechnen des Virtual DOM und zum Rendern der Seite. Dies führt zu einer Erhöhung der Code-Größe. Beispielsweise hat eine mit Next.js erstellte Hello World-Anwendung 70 KB JavaScript-Code.

Svelte verfolgt eine völlig andere Strategie. Während der Anwendungs-Build-Phase kompiliert Svelte den von Entwicklern geschriebenen Code mit einem Compiler anstelle einer Runtime. Das endgültig generierte Produkt enthält keinen Svelte-Bibliothekscode. Daher ist eine Svelte Hello World-Anwendung nur 3 KB groß.

Obwohl Svelte Nicht-JS-Code in JS-Code kompiliert, während der Code einer React-Anwendung reiner JS-Code ist, kann Svelte überraschenderweise besser mit Bibliotheken von Drittanbietern von nativem JavaScript zusammenarbeiten. React hat jedoch ein reiferes Ökosystem.

1. Zustand

Vergleichen Sie zunächst die Möglichkeiten, die einfachste Zustandsverwaltung in den beiden Frameworks zu erreichen. In React müssen Sie useState verwenden, um einen reaktiven Zustand count und seine entsprechende Setter-Funktion setCount() zu generieren. Wenn Sie setCount() aufrufen, um den Wert von count zu aktualisieren, wird die UI erneut gerendert.

import { useState } from "react";

function Counter() {
  // Verwenden Sie useState, um den Zustand count auf 0 zu initialisieren und die Update-Funktion setCount zu erhalten
  const [count, setCount] = useState(0);
  return (
    <div>
      {/* Wenn Sie auf die Schaltfläche klicken, rufen Sie setCount auf, um den Wert von count zu erhöhen und den aktuellen Zählwert anzuzeigen */}
      <button onClick={() => setCount(count + 1)}>Count is {count}</button>
    </div>
  );
}

In Svelte ist es reaktiv, solange eine Variable mit dem Schlüsselwort let deklariert wird. Eine reaktive Variable count wird im Svelte-Komponentencode deklariert. Der Svelte-Komponentencode ist in drei Teile unterteilt: script, style und template. Der Unterschied besteht darin, dass in Svelte das HTML nicht in ein template-Tag eingeschlossen werden muss. Um den Wert von count zu ändern, müssen Sie ihn nur wie eine gewöhnliche Variable bearbeiten, und das Framework führt automatisch eine reaktive UI-Aktualisierung durch.

<script>
  // Deklarieren Sie die reaktive Variable count und initialisieren Sie sie auf 0
  let count = 0;
</script>

{#if true}
  <!-- Wenn Sie auf die Schaltfläche klicken, erhöhen Sie den Wert von count und zeigen Sie den aktuellen Zählwert an -->
  <button on:click={() => count++}>
    count is {count}
  </button>
{/if}

2. Props

Als Nächstes sehen wir uns an, wie Eigenschaften in den beiden Frameworks empfangen und übergeben werden. In den Funktionskomponenten von React werden Eigenschaften in Form von Funktionsparametern empfangen, und die Destrukturierungszuweisungsmethode wird normalerweise verwendet, um die spezifischen Werte der Eigenschaften zu erhalten.

function ColoredBox({color}) {
  // Verwenden Sie die Destrukturierungszuweisung, um den Wert der Farbeigenschaft abzurufen und anzuzeigen
  return (
    <p>You picked: {color}</p>
  )
}

In Svelte bedeutet das Hinzufügen des Schlüsselworts export vor der Deklaration einer Variablen, dass die Variable eine extern übergebene Eigenschaft ist.

<script>
  // Deklarieren Sie color als extern übergebene Eigenschaft
  export let color; 
</script>

{#if color}
  You picked: {color}
{/if}

In Bezug auf die Variablenübergabe ähnelt die Syntax der beiden, beide in Form von HTML-Attributen:

<App color={color} />

Svelte bietet auch einen syntaktischen Zucker, um die Eigenschaftenübergabe prägnanter zu gestalten:

<App {color} />

Es ist zu beachten, dass die Eigenschaften von React eine Komponente sein können, während Svelte diese Methode nicht unterstützt.

<App head={<Head />} />

3. Kinder

In React können Sie die Informationen von Kindkomponenten über props.children abrufen.

function ParentComponent(props) {
  // Rufen Sie den Inhalt von Kindkomponenten über props.children ab und zeigen Sie ihn an
  return (
    <div>
      {props.children}
    </div>
  );
}

In Svelte muss diese Funktion über den Slot slot implementiert werden.

<!-- Widget.svelte -->
<div>
  <slot>
    <!-- Wenn es keinen Inhalt von Kindkomponenten gibt, wird dieser Inhalt standardmäßig angezeigt -->
    Wenn es keinen Inhalt von Kindkomponenten gibt, wird dieser Inhalt standardmäßig angezeigt.
  </slot>
</div>

<!-- App.svelte -->
<Widget />
<!-- ⬆️Diese Komponente zeigt den Standardinhalt an -->

<Widget>
  <p>Diese Kindkomponente überschreibt den Standardinhalt</p>
</Widget>

Svelte unterstützt auch benannte Slots:

<!-- Widget.svelte -->
<div>
  <slot name="header" />
  <p>Inhalt zwischen dem Header und dem Footer</p>
  <slot name="footer" />
</div>

<!-- App.svelte -->
<Widget>
  <h1 slot="header">Hallo</h1>
  <p slot="footer">Svelte Industries</p>
</Widget>

4. Lebenszyklus

In den Funktionskomponenten von React muss der Lebenszyklus über useEffect simuliert werden.

useEffect(() => {
  // Wird beim Initialisieren der Komponente ausgeführt, entspricht onMount
  console.log('Component initialized');
  return () => {
    // Wird ausgeführt, wenn die Komponente aufgehoben wird, entspricht onDestroy
    console.log('Component unmounted');
  }
}, [])

In Svelte müssen Sie nur die entsprechenden Lebenszyklusfunktionen im script importieren.

<script>
  import { onMount, onDestroy } from 'svelte';

  onMount(() => {
    console.log('Component mounted');
  });

  onDestroy(() => {
    console.log('Component unmounted');
  });
</script>

5. Seiteneffekte

In React werden Seiteneffekte über useEffect deklariert, und die Variablen, von denen die Seiteneffekte abhängen, werden manuell über den zweiten Parameter von useEffect deklariert.

function Counter() {
  const [count] = useState(0);

  useEffect(() => {
    // Wenn sich count ändert, aktualisieren Sie document.title
    document.title = `count is ${count}`;
  }, [count])
}

In Svelte können Seiteneffekte über einen reaktiven Ausdruck deklariert werden, der mit dem Symbol $ beginnt.

<script>
  let count = 0;

  // Wenn sich count ändert, wird document.title automatisch aktualisiert
  $: document.title = `count is ${count}`;
</script>

Die Anweisung nach $: verfügt automatisch über reaktive Funktionen. Wenn sich die in der Anweisung referenzierte Variable ändert, wird die Anweisung automatisch ausgeführt, was dem Seiteneffekt der Variablenänderung entspricht. Im Vergleich dazu muss Svelte die Variablen, von denen die Seiteneffektanweisung abhängt, nicht explizit deklarieren, und es ist bequemer zu verwenden als React.

6. Berechnete Eigenschaften

Berechnete Eigenschaften beziehen sich auf Variablen, deren Werte vom state abhängen, ähnlich wie computed in Vue. In React können berechnete Eigenschaften über useMemo erstellt werden. Der erste Parameter von useMemo ist eine Funktion, und sein Rückgabewert ist der Wert der berechneten Eigenschaft; der zweite Parameter ist das Abhängigkeitsarray. Wenn sich die Variablen im Abhängigkeitsarray ändern, wird der Wert der berechneten Eigenschaft neu berechnet.

function Counter() {
  const [count] = useState(0);

  // Verwenden Sie useMemo, um eine berechnete Eigenschaft double zu erstellen, die von count abhängt
  const double = useMemo(() => count * 2, [count]);
}

In Svelte kann der im vorherigen Abschnitt erwähnte $-Ausdruck auch verwendet werden, um berechnete Eigenschaften zu erstellen.

<script>
  let count = 0;

  // Erstellen Sie eine berechnete Eigenschaft doubled, die von count abhängt. Wenn sich count ändert, wird doubled neu zugewiesen
  $: doubled = count * 2
</script>

7. Bedingte Wiedergabe

Da React JSX verwendet, um die UI zu beschreiben, kann der ternäre Ausdruck von JavaScript verwendet werden, um die Logik der bedingten Wiedergabe zu implementieren.

function Counter() {
  const [count] = useState(0);

  return <>
    {/* Bedingte Wiedergabe entsprechend dem Wert von count */}
    { count > 1000 ? <p>Big</p> : <p>Small</p> }
  </>
}

Svelte verwendet eine Syntax, die traditionellen Vorlagensprachen ähnelt, um die Logik der bedingten Wiedergabe auszudrücken.

<script>
let count = 0
</script>

{#if count > 1000}
  <p>Big</p>
{:else if count > 500}
  <p>Medium</p>
{:else}
  <p>Small</p>
{/if}

Im Vergleich dazu ist die Syntax von Svelte zwar etwas umständlicher, aber aufgrund der Existenz der else if-Anweisung ist sie klarer als der ternäre Ausdruck von React, wenn komplexe bedingte Wiedergabelogik ausgedrückt wird.

8. Schleifen

In React können Sie map verwenden, um ein Array zu durchlaufen und eine Reihe von Komponenten zurückzugeben, um die Schleifenwiedergabe zu erreichen.

function Looper() {
  const items = [
    { id: 1, name: "foo" },
    { id: 2, name: "bar" },
    { id: 3, name: "baz" }
  ];

  return <>
    {/* Verwenden Sie map, um das Items-Array zu durchlaufen, Komponenten zu rendern und den Schlüssel festzulegen */}
    {items.map(item => <p key={item.id}>{item.name}</p>)}
  </>
}

In Svelte kann die Schleifenwiedergabe über each durchgeführt werden, wobei (item.id) angibt, dass der key der Wiedergabe item.id ist.

<script>
  const items = [
    { id: 1, name: "foo" },
    { id: 2, name: "bar" },
    { id: 3, name: "baz" }
  ];
</script>

{#each items as item (item.id)}
  <p>{item.name}</p>
{/each}

9. Globales Zustandsmanagement

Wenn Sie in React einen Zustand erstellen möchten, der von mehreren Komponenten gemeinsam genutzt wird, kann dies über Context erreicht werden. Verwenden Sie zuerst createContext, um einen CountContext zu erstellen, und verwenden Sie dann den Provider dieses Context, um die Kindkomponenten in der Root-Komponente App einzuschließen. Auf diese Weise können Sie in der Kindkomponente Counter den Inhalt in CountContext über useContext abrufen.

// context.js
import { createContext } from 'react';

// Erstellen Sie CountContext und initialisieren Sie ihn auf 0
export const CountContext = createContext(0);

// Counter.jsx
import { useContext } from 'react';
import { CountContext } from './context';

function Counter() {
  // Verwenden Sie useContext, um den Wert in CountContext abzurufen
  const count = useContext(CountContext);

  return <div>{count}</div>;
}

// App.jsx
import { CountContext } from './context';
import { Counter } from './Counter';

function App() {
  return <>
    {/* Verwenden Sie CountContext.Provider, um Kindkomponenten einzuschließen und den Zustand zu übergeben */}
    <CountContext.Provider value={42}>
      <Counter />
    </CountContext.Provider>
  </>;
}

In Svelte kann ein globaler Store über writable deklariert werden. Importieren Sie den Store in die Komponente, die den globalen Zustand verwenden muss, lesen Sie den Store über die Art $+Variablenname und rufen Sie store.update() auf, um den Store zu aktualisieren.

// store.js
import { writable } from "svelte/store";

// Deklarieren Sie den globalen Store count und initialisieren Sie ihn auf 0
export const count = writable(0);

// App.svelte
<script>
import { count } from "./store";
</script>

<button onClick={() => count.update(c => c + 1)}>
  {/* Verwenden Sie $count, um den Wert des globalen Zustands count zu lesen */}
  {$count}
</button>

Persönlich finde ich, dass die Syntax für die globale Zustandsverwaltung von Svelte prägnanter ist. Es ist nicht erforderlich, Provider zu schreiben, und Sie können den globalen Zustand einfach mit einem $-Symbol verwenden.

10. Asynchrone Wiedergabe

In React18 wurde ein Mechanismus für die asynchrone Wiedergabe eingeführt. Sie können den neuen use-Hook verwenden, um asynchronen Code auszuführen, und seine Wirkung ähnelt der await-Anweisung. Eine Komponente, die use verwendet, ist eine asynchrone Komponente. Da gewartet werden muss, bis der asynchrone Code ausgeführt wurde, bevor die Komponente gerendert werden kann.

function AsyncComponent() {
  const number = use(Promise.resolve(100));

  return <p>{number}</p>;
}

Bei Verwendung einer asynchronen Komponente kann diese in eine Suspense-Komponente eingeschlossen werden, und eine fallback-Komponente kann übergeben werden. Die fallback-Komponente wird angezeigt, wenn die asynchrone Komponente noch nicht gerendert wurde, was zum Hinzufügen eines Ladezustands verwendet wird. Um zu verhindern, dass während des asynchronen Wiedergabeprozesses Fehler auftreten, kann ErrorBoundary auch verwendet werden, um Fehler abzufangen, und die entsprechende fallback-Komponente wird angezeigt, wenn ein Fehler auftritt, um zu vermeiden, dass die Seite abstürzt und leer wird.

function App() {
  return (
    <ErrorBoundary fallback={<ErrorPage />}>
      <Suspense fallback={<LoadingSpinner/>}>
        <ComponentWithAsyncData />
      </Suspense>
    </ErrorBoundary>
  )
}

In Svelte bietet das Framework eine Vorlagensyntax ähnlich JavaScript, um die Anforderungen der asynchronen Wiedergabe und Fehlerbehandlung zu erfüllen.

<script>
  const promise = Promise.resolve(69);
</script>

{#await promise}
  <LoadingSpinner/>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <ErrorPage {error} />
{/await}

Zusammenfassung

Dieser Artikel hat einen detaillierten Vergleich zwischen den React- und Svelte-Frameworks aus zehn Aspekten vorgenommen, darunter Rendering-Modus, Zustandsmanagement, Eigenschaftenübergabe, Behandlung von Kindkomponenten, Lebenszyklus, Seiteneffekte, berechnete Eigenschaften, bedingte Wiedergabe, Schleifen, globales Zustandsmanagement und asynchrone Wiedergabe, die ihre grundlegenden Verwendungsmethoden abdecken. Es wird davon ausgegangen, dass die Leser nach dem Lesen dieses Artikels ein umfassenderes Verständnis von Svelte erlangt haben. Diese beiden UI-Frameworks haben jeweils ihre eigenen Vorteile. Welches schätzen Sie mehr? Sie sind herzlich eingeladen, Ihre Ansichten im Kommentarbereich mitzuteilen.

Referenzen:

• https://www.youtube.com/watch?v=MnpuK0MK4yo
• https://fireship.io/lessons/svelte-for-react-developers/

Leapcell: Das Beste aus Serverlosem Webhosting

Schließlich möchte ich eine Plattform empfehlen, die sich am besten für die Bereitstellung von Nodejs-Diensten eignet: Leapcell

🚀 Mit Ihrer Lieblingssprache erstellen

Problemlos in JavaScript, Python, Go oder Rust entwickeln.

🌍 Unbegrenzte Projekte kostenlos bereitstellen

Zahlen Sie nur für das, was Sie verwenden – keine Anfragen, keine Gebühren.

⚡ Pay-as-You-Go, keine versteckten Kosten

Keine Leerlaufgebühren, nur nahtlose Skalierbarkeit.

📖 Entdecken Sie unsere Dokumentation

🔹 Folgen Sie uns auf Twitter: @LeapcellHQ