Introduction à la bibliothèque JavaScript solide

SolidJS: Une bibliothèque d'interface utilisateur JavaScript haute performance

Solid est une bibliothèque JavaScript réactive pour créer des interfaces utilisateur, qui ne nécessite pas de DOM virtuel. Il compile le modèle dans un nœud DOM réel et enveloppe les mises à jour dans une réaction à grain fin, donc lorsque l'état est mis à jour, seul le code pertinent s'exécutera.

Cette méthode permet au compilateur d'optimiser les mises à jour initiales de rendu et d'exécution. Cette concentration sur les performances en fait l'un des cadres JavaScript les plus acclamés.

J'étais curieux à ce sujet et je voulais essayer, alors j'ai passé un peu de temps à créer une petite application à faire pour explorer comment ce framework gère les composants de rendu, la mise à jour de l'état, la mise en place de stockage, etc.

Si vous avez hâte de voir le code final et les résultats, consultez la démo finale: [Le lien de démonstration final doit être inséré ici, non fourni dans le texte d'origine]

Démarrage rapide

Comme la plupart des cadres, nous pouvons commencer par installer le package NPM. Pour utiliser le cadre avec JSX, exécutez:

 NPM Installer Solid-Js Babel-Preset-Solid

Ensuite, nous devons ajouter Babel-Preset-Solid à notre fichier de configuration Babel, WebPack ou Rollup:

 "Presets": ["solide"]

Ou, si vous souhaitez configurer une petite application, vous pouvez également utiliser l'un de leurs modèles:

 # Créez une petite application à partir de modèle solide npx degit solidejs / modèles / js my-app

# Changement vers le répertoire de projet créé CD My-App

# Installer les dépendances NPM I # ou YARN ou PNPM

# Démarrer le serveur de développement NPM Run Dev

TypeScript est pris en charge, si vous souhaitez démarrer un projet TypeScript, modifiez la première commande en npx degit solidjs/templates/ts my-app .

Créer et rendre des composants

La syntaxe du composant de rendu est similaire à react.js, donc elle peut sembler familière:

 import {render} à partir de "solide-js / web";

const Hellomessage = accessoires =><div> Bonjour {props.name}</div> ;

rendre(
  () =><hellomessage name="Taylor"></hellomessage> ,
  document.getElementById ("Hello-Example")
));

Nous devons d'abord importer la fonction de rendu, puis créer un div avec du texte et un accessoire, et appeler le rendu, en passant dans les éléments du composant et du conteneur.

Ce code est ensuite compilé dans une expression réelle DOM. Par exemple, l'exemple de code ci-dessus, une fois compilé par Solid, ressemble à ceci:

 import {rendu, modèle, insert, createComponent} à partir de "solide-js / web";

const _tmpl $ = modèle (`<div> Bonjour</div> `);

const Hellomessage = Props => {
  const _el $ = _tmpl $ .clonenode (true);
  insert (_el $, () => props.name);
  retour _el $;
};

rendre(
  () => createComponent (Hellomessage, {name: "taylor"}),
  document.getElementById ("Hello-Example")
));

Solid Playground est très cool, il montre que Solid a différentes méthodes de rendu, y compris le client, le serveur et le client avec hydratation.

Utilisez des signaux pour suivre les valeurs changeantes

Solid utilise un crochet appelé createSignal , qui renvoie deux fonctions: un getter et un setter. Cela peut sembler un peu bizarre si vous avez l'habitude d'utiliser des frameworks comme react.js. Vous vous attendez généralement à ce que le premier élément soit la valeur elle-même;

Par exemple, si nous écrivons le code suivant:

 const [todos, addTodos] = CreateSignal ([]);

L'enregistrement todos ne renvoie pas de valeur, mais une fonction. Si nous voulons utiliser la valeur, nous devons appeler la fonction, comme todos() .

Pour une petite liste de tâches, ce sera:

 import {createSignal} à partir de "solide-js";

const todolist = () => {
  Laissez l'entrée;
  const [todos, addTodos] = CreateSignal ([]);

  const addtodo = value => {
    return addTodos ([... todos (), valeur]);
  };

  Retour (
    <h1>Liste de faire:</h1>
    <input type="text" ref="{el"> entrée = el} />
    <button onclick="{()"> addTodo (input.value)}> Ajouter un élément</button>
    

{todos (). map (item => (
• {article}
))}

)); };

L'exemple de code ci-dessus affichera un champ de texte, et après avoir cliqué sur le bouton "Ajouter le projet", les Todos seront mis à jour avec le nouveau projet et il sera affiché dans la liste.

Cela peut ressembler très à l'utilisation useState , alors quelle est la différence entre l'utilisation de Getter? Considérez l'exemple de code suivant:

 console.log ("Créer des signaux");
const [firstName, setFirstName] = CreateSignal ("Whitney");
const [lastName, setLastName] = CreateSignal ("Houston");
const [displayfullName, setDisplayFullName] = CreateSignal (true);

const DisplayName = CreateMemo (() => {
  if (! displayfullName ()) return firstName ();
  return `$ {firstName ()} $ {LastName ()}`;
});

createEFffect (() => console.log ("mon nom est", displayName ()));

console.log ("set showfullName: false");
setDisplayFullName (false);

console.log ("Change LastName");
setLastName ("boop");

console.log ("set showfullName: true");
setDisplayFullName (true);

L'exécution du code ci-dessus obtiendra:

 <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>

Le point principal à noter est qu'après avoir établi un nouveau nom de dernier, "Mon nom est ..." n'est pas enregistré. C'est parce que rien n'écoute les changements à lastName() à ce stade. La nouvelle valeur de displayFullName() est définie uniquement lorsque la valeur de displayName() change, c'est pourquoi lorsque setShowFullName est défini sur true, nous pouvons voir que le nouveau nom de lastname est affiché.

Cela nous offre une façon plus sûre de suivre les mises à jour des valeurs.

Primitives réactives

Dans le dernier exemple de code, j'ai introduit createSignal , et il y a d'autres primitives: createEffect et createMemo .

createeffect

createEffect suit les dépendances et s'exécute après chaque rendu des changements de dépendance.

 // N'oubliez pas de l'importer d'abord en utilisant 'Import {createEffct} à partir de "solide-js";' const [count, setCount] = createSignal (0);

CreateEFeffect (() => {
  console.log ("Count est à", count ());
});

Chaque fois que la valeur de count() change, "Count est à ..." sera enregistré

CreateMemo

createMemo crée un signal en lecture seule qui recalcule sa valeur chaque fois que les dépendances du code exécuté sont mises à jour. Il peut être utilisé lorsque vous souhaitez mettre en cache certaines valeurs et y accéder sans les réévaluer (jusqu'à ce que la dépendance change).

Par exemple, si nous souhaitons afficher un compteur 100 fois et mettre à jour la valeur lorsque le bouton est cliqué, l'utilisation createMemo permettra à la recalcul ne se produise qu'une fois par clic:

 fonction compteur () {
  const [count, setCount] = CreateSignal (0);
  // il sera appelé 100 fois sans créer un compteur d'enveloppement // const-compteur = () => {
  // return count ();
  //}

  // Emballage Counter avec CreateMemo, uniquement appelé une fois par mise à jour // n'oubliez pas d'utiliser 'Import {CreateMemo} à partir de "solide-js";'

  Retour (
    <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>
  ));
}

Méthode de cycle de vie

Solid expose plusieurs méthodes de cycle de vie, telles que onMount , onCleanup et onError . Si nous voulons que du code s'exécute après le rendu initial, nous devons utiliser onMount :

 // N'oubliez pas de l'importer d'abord en utilisant 'Import {onMount} à partir de "solide-js";'
  console.log ("Je suis monté!");
});

onCleanup est similaire à componentDidUnmount dans React - il s'exécute lors du recalcul de la portée réactive.

onError est exécuté lorsqu'une erreur se produit dans la sous-gorge la plus récente. Par exemple, lorsque l'acquisition de données échoue, nous pouvons les utiliser.

stockage

Pour créer un magasin pour les données, Solid expose createStore , dont la valeur de retour est un objet proxy en lecture seule et une fonction de setter.

Par exemple, si nous modifions notre exemple de tâche pour utiliser le stockage au lieu de l'état, cela ressemblerait à ceci:

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

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

onMount (() => {
  addTodos ('list', (list) => [... list, {item: "un nouvel élément de todo", terminé: false}]);
});

L'exemple de code ci-dessus enregistrera d'abord un objet proxy avec un tableau vide, puis enregistrera un objet proxy avec un tableau contenant l'objet {item: "a new todo item", completed: false} .

Il convient de noter que si ses propriétés ne sont pas accessibles, l'objet d'état de niveau supérieur ne peut pas être suivi - c'est pourquoi nous enregistrons todos.list au lieu de todos .

Si nous n'enregistrons que todos dans createEffect , nous verrons la valeur initiale de la liste, mais nous ne verrons pas la valeur mise à jour dans onMount .

Pour modifier les valeurs du magasin, nous pouvons les mettre à jour en utilisant la fonction des paramètres définis lors de l'utilisation createStore . Par exemple, si nous souhaitons mettre à jour l'élément de liste de tâches pour "terminer", nous pouvons mettre à jour le stockage de cette façon:

 const [todos, settodos] = createstore ({{
  Liste: [{élément: "nouvel élément", terminé: false}]
});

const markascompte = text => {
  colons (
    "liste",
    (i) => i.item === texte,
    "complété",
    (c) =>! c
  ));
};

Retour (
  <button onclick="{()"> MarkasComplete ("nouvel élément")}> Mark comme complet</button>
));

Flux de contrôle

Pour éviter de gaspiller tous les nœuds DOM sont recréés chaque fois qu'ils sont mis à jour lors de l'utilisation de méthodes comme .map() , Solid nous permet d'utiliser l'assistant de modèle.

Certains d'entre eux sont disponibles, par exemple For la boucle via des projets, Show pour afficher et cacher conditionnellement les éléments, Switch et Match pour afficher des éléments qui correspondent aux conditions spécifiques, etc.!

Voici quelques exemples montrant comment les utiliser:

<for each="{todos.list}" fallback="{<div"> Chargement... }>
  {(item) =><div> {article}</div> }
</for>
<show when="{todos.list[0]?.completed}" fallback="{<div"> Chargement... }>
  <div>1er article terminé</div>
</show>
<switch fallback="{<div"> Pas d'articles }>
  <match when="{todos.list[0]?.completed}"><completedlist></completedlist></match>
  <match when="{!todos.list[0]?.completed}"><todolist></todolist></match>
</switch>

Projet de démonstration

Voici une introduction rapide aux bases du solide. Si vous souhaitez l'essayer, j'ai créé un projet de démarrage que vous pouvez déployer automatiquement sur Netlify et Clone sur votre github en cliquant sur le bouton ci-dessous!

[Le bouton qui est déployé sur Netlify doit être inséré ici, non fourni dans le texte d'origine] Ce projet comprend les paramètres par défaut du projet solide, ainsi qu'un exemple de demande de tâches pour les concepts de base que j'ai mentionnés dans cet article pour vous aider à démarrer!

Ce cadre est bien plus que ce que j'ai couvert ici, alors n'hésitez pas à consulter la documentation pour plus d'informations!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!