Einführung in die solide JavaScript -Bibliothek

SolidJs: Eine hochleistungsfähige reaktionsschnelle JavaScript-UI-Bibliothek

Solid ist eine reaktionsschnelle JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen, für die kein virtuelles DOM erforderlich ist. Es kompiliert die Vorlage in einen realen DOM-Knoten und wickelt die Updates in einer feinkörnigen Reaktion ein. Wenn der Status aktualisiert wird, wird nur der entsprechende Code ausgeführt.

Mit dieser Methode kann der Compiler die ersten Rendering- und Laufzeit -Updates optimieren. Dieser Fokus auf Leistung macht es zu einem der am meisten gefeierten JavaScript -Frameworks.

Ich war gespannt darauf und wollte es versuchen, also habe ich einige Zeit damit verbracht, eine kleine Aufgabenanwendung zu erstellen, um zu untersuchen, wie dieses Framework die Rendern von Komponenten, den Aktualisierungsstatus, das Einrichten von Speicher und vieles mehr umgeht.

Wenn Sie es kaum erwarten können, den endgültigen Code und die Ergebnisse zu sehen, lesen Sie die endgültige Demo: [Der endgültige Demo -Link sollte hier eingefügt werden und im Originaltext nicht bereitgestellt werden]

Schneller Start

Wie die meisten Frameworks können wir zunächst das NPM -Paket installieren. Um das Framework mit JSX zu verwenden, laufen Sie:

 NPM Installieren Sie Solid-JS Babel-Preset-Solid

Anschließend müssen wir unsere Babel-, Webpack- oder Rollup-Konfigurationsdatei babel-Preset-Solid hinzufügen:

 "Voreinstellungen": ["Solid"]

Oder wenn Sie eine kleine Anwendung einrichten möchten, können Sie auch einen ihrer Vorlagen verwenden:

 # Erstellen Sie eine kleine Anwendung aus soliden Vorlage NPX Degit SolidJS/Vorlagen/JS My-App

# Wechseln Sie in die erstellte Projektverzeichnis-CD My-App

# Installieren Sie Abhängigkeiten NPM I # oder Garn oder PNPM

# Starten Sie den Entwicklungsserver NPM Run Dev

Typscript wird unterstützt. Wenn Sie ein TypeScript-Projekt starten möchten, ändern Sie den ersten Befehl in npx degit solidjs/templates/ts my-app .

Komponenten erstellen und rendern

Die Syntax der Rendering -Komponente ähnelt React.js, sodass sie bekannt aussehen kann:

 importieren {render} aus "Solid-JS/Web";

const hellomessage = props =><div> Hallo {props.name}</div> ;

machen(
  () =><hellomessage name="Taylor"></hellomessage> Anwesend
  document.getElementById ("Hello-Exampe")
);

Wir müssen zuerst die Renderfunktion importieren, dann einen DIV mit Text und Requisit erstellen und Render aufrufen, wodurch die Komponenten- und Containerelemente weitergegeben werden.

Dieser Code wird dann in einen realen DOM -Ausdruck zusammengestellt. Zum Beispiel sieht das obige Codebeispiel, das einmal von Solid zusammengestellt wurde, wie folgt aus:

 Importieren {Render, Vorlage, einfügen, createComponent} aus "Solid-JS/Web";

const _tmpl $ = Vorlage (`<div> Hallo</div> `);

const hellomessage = props => {
  const _el $ = _tmpl $ .clonenode (true);
  insert (_el $, () => props.name);
  return _el $;
};

machen(
  () => createComponent (Hellomessage, {Name: "Taylor"}),
  document.getElementById ("Hello-Exampe")
);

Solid Playground ist sehr cool. Es zeigt, dass Solid unterschiedliche Rendering -Methoden hat, einschließlich Client, Server und Client mit Flüssigkeitszufuhr.

Verwenden Sie Signale, um sich ändernde Werte zu verfolgen

Solid verwendet einen Haken mit dem Namen createSignal , der zwei Funktionen zurückgibt: einen Getter und ein Setter. Dies sieht möglicherweise etwas seltsam aus, wenn Sie es gewohnt sind, Frameworks wie React.js zu verwenden. Normalerweise erwarten Sie, dass das erste Element der Wert selbst ist. In Solid müssen wir jedoch Getters explizit anrufen, um abzufangen, wo sich der Lesewert befindet, um seine Änderungen im Auge zu behalten.

Zum Beispiel, wenn wir den folgenden Code schreiben:

 const [todos, addtodos] = createSsignal ([]);

Das Aufzeichnen todos gibt keinen Wert zurück, sondern eine Funktion. Wenn wir den Wert verwenden wollen, müssen wir die Funktion aufrufen, z. B. todos() .

Für eine kleine Aufgabenliste wird dies sein:

 import {createSsignal} aus "Solid-Js";

const todolist = () => {
  Eingabe lassen;
  const [todos, addtodos] = createSsignal ([]);

  const addtodo = value => {
    addtodos zurückgeben ([... Todos (), Wert]);
  };

  Zurückkehren (
    <h1>Auflistung:</h1>
    <input type="text" ref="{el"> input = el} />
    <button onclick="{()"> Addtodo (input.Value)}> Element hinzufügen</button>
    

{Todos (). map (item => (
• {Artikel}
))}

); };

Im obigen Code -Beispiel wird ein Textfeld angezeigt. Nach dem Klicken auf die Schaltfläche "Projekt hinzufügen" wird der Todos mit dem neuen Projekt aktualisiert und wird in der Liste angezeigt.

Dies mag der Verwendung useState sehr ähnlich aussehen. Was ist also der Unterschied zwischen der Verwendung von Getter? Betrachten Sie das folgende Code -Beispiel:

 console.log ("Signale erstellen");
const [FirstName, setfirstname] = createSsignal ("whitney");
const [lastname, setLastName] = createSsignal ("Houston");
const [displayfulName, setDisplayfulName] = createSsignal (true);

const displayName = CreateMemo (() => {
  if (! displayFulLname ()) return firstname ();
  return `$ {firstName ()} $ {lastName ()}`;
});

createefect (() => console.log ("Mein Name ist", displayName ()));

console.log ("set ShowfullName: false");
setDisplayfulName (false);

console.log ("änderung nachName");
setLastName ("boop");

console.log ("set ShowfullName: true");
setDisplayfulName (wahr);

Das Ausführen des obigen Codes wird erhalten:

 <code>Create Signals My name is Whitney Houston Set showFullName: false My name is Whitney Change lastName Set showFullName: true My name is Whitney Boop</code>

Der Hauptpunkt ist zu beachten, dass nach dem Einstellen eines neuen Nachnamens "Mein Name ist ..." nicht aufgezeichnet wird. Dies liegt daran, dass zu diesem Zeitpunkt nichts auf Änderungen an lastName() zuhört. Der neue Wert von displayFullName() wird nur festgelegt, wenn sich der Wert von displayName() ändert. Deshalb können wir sehen, dass der neue Nachname angezeigt wird, wenn setShowFullName auf True festgelegt wird.

Dies bietet uns eine sicherere Möglichkeit, Aktualisierungen von Werten zu verfolgen.

Reaktionsschnelle Primitive

Im letzten Code -Beispiel habe ich createSignal erregt, und es gibt einige andere Primitive: createEffect und createMemo .

Createefect

createEffect verfolgt Abhängigkeiten und läuft nach jeder Wiedergabe der Abhängigkeitsänderungen.

 // Vergiss nicht, es zuerst mit 'importieren {createefect} aus "Solid-Js";' importieren; '; const [count, setCount] = createSsignal (0);

createefect (() => {
  console.log ("count is at", count ());
});

Jedes Mal, wenn der Wert von count() ändert, wird "Count bei ..." aufgezeichnet

Creatememo

createMemo erstellt ein schreibgeschütztes Signal, das seinen Wert neu berechnet, wenn die Abhängigkeiten des ausgeführten Codes aktualisiert werden. Es kann verwendet werden, wenn Sie einige Werte zwischenspeichern und darauf zugreifen möchten, ohne sie neu zu bewerten (bis sich die Abhängigkeit ändert).

Wenn wir beispielsweise 100 Mal einen Zähler anzeigen und den Wert aktualisieren möchten, wenn die Schaltfläche klickt, kann die Verwendung createMemo nur einmal per Klick neu berechnet werden:

 Funktion counter () {
  const [count, setCount] = createSsignal (0);
  // Es wird 100 -mal aufgerufen, ohne MEMO -Wickelzähler // const counter = () => {
  // return count ();
  //}

  // Wickeln mit CreateMemo, das nur einmal pro Update aufgerufen wird // Vergiss nicht, 'Import {CreateMemo} aus "Solid-Js";' zu verwenden; '; um es zu importieren const counter = CreateMemo (() => count ());

  Zurückkehren (
    <div>
      <button onclick="{()"> setCount (count () 1)}> count: {count ()}</button>
      <div>1. {counter ()}</div>
      <div>2. {counter ()}</div>
      <div>3. {Counter ()}</div>
      <div>4. {Counter ()}</div>
    </div>
  );
}

Lebenszyklusmethode

Solid enthüllt mehrere Lebenszyklusmethoden wie onMount , onCleanup und onError . Wenn wir möchten, dass ein Code nach dem ersten Rendering ausgeführt wird, müssen wir onMount verwenden:

 // Vergiss nicht, es zuerst mit 'import {onmount} aus "Solid-Js" zu importieren;'; Onmount (() => {
  console.log ("Ich montierte!");
});

onCleanup ähnelt der componentDidUnmount in React - es wird ausgeführt, wenn die Reaktionsfernrohr -Neuberechnung entspricht.

onError wird ausgeführt, wenn im neuesten Subscope ein Fehler auftritt. Wenn die Datenerfassung beispielsweise ausfällt, können wir sie verwenden.

Lagerung

Um einen Speicher für Daten zu erstellen, enthält Solid createStore , dessen Rückgabewert ein schreibgeschütztes Proxy-Objekt und eine Setterfunktion ist.

Wenn wir beispielsweise unser Aufgabenbei ändern, um den Speicher anstelle von Status zu verwenden, würde dies so aussehen:

 const [todos, addtodos] = CreateStore ({list: []});

createefect (() => {
  console.log (todos.list);
});

Onmount (() => {
  addtodos ('list', (list) => [... list, {item: "Ein neues Todo -Element", fertig: false}]);
});

Das obige Codebeispiel zeichnet zuerst ein Proxy -Objekt mit einem leeren Array auf und dann ein Proxy -Objekt mit einem Array mit dem Objekt {item: "a new todo item", completed: false} .

Es ist zu beachten, dass, wenn auf die Eigenschaften nicht zugegriffen wird, auf das Statusobjekt der obersten Ebene nicht nachverfolgt werden kann - deshalb protokollieren wir todos.list anstelle von todos .

Wenn wir nur todos in createEffect aufzeichnen, werden wir den Anfangswert der Liste sehen, aber wir werden den aktualisierten Wert in onMount nicht sehen.

Um die Werte im Speicher zu ändern, können wir sie über die Einstellungsfunktion aktualisieren, die bei der Verwendung createStore definiert ist. Wenn wir beispielsweise das Aufgabenlistenelement auf "fertiggestellt" aktualisieren möchten, können wir den Speicher auf diese Weise aktualisieren:

 const [todos, settodos] = CreateStore ({{{
  Liste: [{item: "Neues Element", fertig: false}]
});

const markasComplete = text => {
  settodos (
    "Liste",
    (i) => I.Item === Text,
    "vollendet",
    (c) =>! c
  );
};

Zurückkehren (
  <button onclick="{()"> MarkaSComplete ("neues Element")}> markieren als vollständig</button>
);

Kontrollfluss

Um zu vermeiden, dass alle DOM -Knoten jedes Mal neu erstellt werden, wenn sie bei der Verwendung von Methoden wie .map() aktualisiert werden, ermöglicht Solid uns den Vorlagenassistenten.

For davon sind verfügbar Switch Match Show

Hier sind einige Beispiele, die zeigen, wie man sie verwendet:

<for each="{todos.list}" fallback="{<div"> Laden... }>
  {(item) =><div> {Artikel}</div> }
</for>
<show when="{todos.list[0]?.completed}" fallback="{<div"> Laden... }>
  <div>1. Artikel abgeschlossen</div>
</show>
<switch fallback="{<div"> Keine Gegenstände }>
  <match when="{todos.list[0]?.completed}"><completedlist></completedlist></match>
  <match when="{!todos.list[0]?.completed}"><todolist></todolist></match>
</switch>

Demo -Projekt

Hier finden Sie eine kurze Einführung in die Grundlagen von Solid. Wenn Sie es ausprobieren möchten, habe ich ein Starter -Projekt erstellt, das Sie automatisch für Netlify bereitstellen und an Ihren GitHub klonen können, indem Sie auf die Schaltfläche unten klicken!

[Die Schaltfläche, die in NetLify bereitgestellt wird, sollte hier eingefügt und im Originaltext nicht bereitgestellt werden.] Dieses Projekt enthält die Standardeinstellungen für das solide Projekt sowie eine Beispiel-Aufgabe-Anwendung für die grundlegenden Konzepte, die ich in diesem Beitrag erwähnt habe, um Ihnen den Einstieg zu erleichtern!

Dieser Framework ist viel mehr als das, was ich hier behandelt habe. Weitere Informationen finden Sie in der Dokumentation, um weitere Informationen zu erhalten.

Das obige ist der detaillierte Inhalt vonEinführung in die solide JavaScript -Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!