React ist mit Abstand das größte Frontend-Javascript-Framework in der modernen Webentwicklung. Obwohl Svelte in den letzten Jahren immer beliebter wurde. Was macht Svelte so besonders?

• Sehr einfach zu erlernende Syntax
• Anstatt das Framework an den Browser zu senden, wird der Code in Standard-js kompiliert, was zu VIEL kleinerer Bundle-Größe und blitzschnellem Code führt.

SolidJS ist ein Frontend-UI-Framework, dessen Syntax React sehr ähnlich ist, das jedoch mit modernem Javascript kompiliert wurde, so dass Svelte es Benutzern ermöglicht, die Geschwindigkeit und Bundle-Größen von Svelte zu ermitteln, aber die gewohnte React-Syntax zu verwenden.

Einrichten eines SolidJS-Projekts

Führen Sie einfach den folgenden Befehl aus, um ein neues Projekt zu generieren…

npm init solid app ProjectName

oder für Typoskript

npm init solid app-ts ProjectName

Was ist das gleiche

• Die Dateistruktur des generierten Projekts sollte sich wie eine Create-React-App anfühlen
• JSX funktioniert immer noch wie JSX

In React würden Sie normalerweise den useState-Hook verwenden, um eine Statusvariable zu generieren, und der Prozess funktioniert in SolidJS immer noch ziemlich gleich, außer dass wir jetzt die Funktion createSignal verwenden.

import {createSignal} from "solid-js"
import './App.css';
function App() {
// create state
  const [count, setCount] = createSignal(1)
// add function
  const add = () => {
    //notice in this context I must invoke the state to get the value (not in jsx)
    setCount(count() + 1)
  }
// JSX works like normal
  return (
    <div class="App">
      <h1>My Counter</h1>
      <h2>{count}</h2>
      <button onClick={add}>Add</button>
    </div>
  );
}
export default App;

Lebenszyklus und createEffect

Hier unterscheidet sich Thinking in Solid stark vom Denken in React. In React ist die gesamte Komponente eine Funktion, die jedes Mal neu ausgeführt wird, wenn Sie Statusaktualisierungen vornehmen, wodurch Endlosschleifen möglich werden, wenn der Status bei Funktionsaufrufen im Funktionskörper der Komponente geändert wird. In React besteht die Lösung hierfür darin, diese Art von Code mit dem useEffect-Hook in einen eigenen Abschluss zu verschieben, damit er bei Bedarf nicht bei jedem Rendering der Komponentenfunktion ausgeführt wird.

Solid verwendet kein virtuelles DOM und führt bei Statusaktualisierungen die Komponentenfunktion nicht erneut aus. Stattdessen wird reaktiver Code in createEffect-Aufrufe eingeschlossen, die die Funktion erneut ausführen, wenn ein Signal in ihnen aktualisiert wird. Der Vorteil davon ist…

• Sie können Fetch / Axios-Aufrufe tätigen, ohne sie in useEffect einschließen zu müssen, um Endlosschleifen zu vermeiden
• JSX wird automatisch in createEffect-Aufrufe kompiliert, weshalb sie bei Statusaktualisierungen aktualisiert werden.

Das Schöne daran ist, dass Aktualisierungen detaillierter sind, sodass die Kosten für einen virtuellen Dom nicht mehr erforderlich sind (nur Code, der von den aktualisierten Daten abhängt, ändert sich, ohne dass Vergleiche durchgeführt werden müssen.)

Endeffekt

Solid behält das Gute an der React-Syntax bei, nutzt aber auch die leistungssteigernden Ansätze von Svelte. Es würde mich nicht wundern, wenn SolidJS in der gleichen Richtung wie Svelte und React wächst!