Cet article explore en profondeur comment utiliser les signaux en solide, une bibliothèque JavaScript moderne et réactive qui s'appuie principalement sur des composants pour créer des interfaces utilisateur.
Contenu:
Points clés:
Introduction du signal
L'une des dernières tendances du développement Web est l'utilisation de signaux, qui fournit un moyen plus réactif de mettre à jour les valeurs variables facilement dans votre programme. Lorsqu'une valeur est mise à jour, tout le contenu utilisant cette valeur est également mis à jour. C'est pourquoi le signal est si unique.
La croissance du signal et son attention rappellent toute la sensation causée lorsque React 16.8 a été libéré en 2019, lorsque l'équipe React a introduit le crochet. L'objectif du crochet est de faire des mises à jour d'état (éventuellement toutes les mises à jour) des méthodes plus fonctionnelles et de rester à l'écart de l'utilisation de classes. Bien que les signaux se ressemblent presque comme le crochet, il existe de légères différences entre elles (nous l'explorons ci-dessous).
Qu'est-ce qui est solide?
Solid (également connu sous le nom de SolidJS) a été fondé en 2016 par Ryan Carniato et publié en 2018. Selon ses propres mots, «cela découle du désir de continuer à utiliser le modèle réactif à grain fin que j'aime de knockout.js.»
Il n'a pas aimé la direction du développement de bibliothèques telles que React et Vue, "il préfère simplement le contrôle et la composabilité apportés en utilisant des primitives plus petites et plus indépendantes que les composants." Framework réactif qui utilise des signaux pour créer une réactivité à grains fins (un modèle de signal qui peut maintenant être vu dans de nombreux autres cadres également).
À première vue, le solide est très similaire à React avec les crochets et les composants fonctionnels. À certains égards, cela est vrai: ils ont tous la même philosophie lorsqu'il s'agit de gérer les données, ce qui facilite l'apprentissage solide si nous connaissons déjà React.
Cependant, il existe quelques différences clés:
Quel est exactement le signal?
Le signalest basé sur le mode observateur, qui est l'un des modèles de conception classiques du gang de quatre. En fait, le knockout utilise quelque chose de très similaire à un signal, appelé "objet observable".
Les signaux sont la partie la plus atomique d'une application réactive. Ce sont des valeurs observables, ont des valeurs initiales et fournissent des méthodes Getter et Setter pour afficher ou mettre à jour cette valeur, respectivement. Cependant, pour tirer le meilleur parti du signal, nous avons besoin de réactions , qui sont les effets de l'abonnement au signal et de l'exécution en réponse à des changements de valeur.
Lorsque la valeur du signal change, il émet en fait un événement (ou "signal") puis déclenche une réaction (ou "effet"). Il s'agit généralement d'un appel à mettre à jour et à rendre tout composant qui dépend de cette valeur. Ces composants sont appelés signaux abonnez-vous . Cela signifie que si la valeur du signal change, seuls ces composants seront mis à jour.
Un concept clé en solide est que tout est un effet, même un rendu de vue. Chaque signal est étroitement lié aux composants spécifiques qu'il affecte. Cela signifie que lorsque la valeur change, la vue peut être remensionnée de manière très fine sans relâche coûteuse pleine page.
Exemple de signal
Pour créer un signal en solide, nous devons utiliser la fonction CreateSignal et attribuer deux variables à sa valeur de retour comme indiqué ci-dessous:
const [name, setName] = createSignal("Diana Prince");Ces deux variables représentent les méthodes Getter et Setter. Dans l'exemple ci-dessus, le nom est Getter et SetName est Setter. La valeur 0 transmise à CreateSignal indique la valeur initiale du signal.
Cela semble certainement familier pour réagir les développeurs. L'utilisation de React Hook pour créer un code similaire ressemble à ceci:
const [name, setName] = useState("Diana Prince");Dans React, Getter (Name) se comporte comme une variable, tandis que Setter (setName) est une fonction.
Cependant, même s'ils semblent très similaires, la principale différence est que le nom se comporte comme une variable dans React, tandis qu'en solide, c'est une fonction.
La prise de nom en fonction signifie que lorsqu'elle est appelée à l'intérieur de l'effet, il souscrit automatiquement l'effet au signal. Cela signifie que lorsque la valeur du signal change, l'effet fonctionnera avec la nouvelle valeur.
Ce qui suit est un exemple utilisant le signal Name ():
const [name, setName] = createSignal("Diana Prince");createEffect peut être utilisée pour exécuter des effets en fonction de n'importe quelle valeur de signal, tel que l'enregistrement de la valeur à la console. Il s'abonnera à tout signal référencé à l'intérieur de la fonction. Si la valeur d'un signal change, le code d'effet s'exécutera à nouveau.
Dans notre exemple, si nous utilisons la fonction SetName Setter pour modifier la valeur du signal de nom, nous pouvons voir le code d'effet s'exécuter et enregistrer le nouveau nom en console:
const [name, setName] = useState("Diana Prince");Prendre Getter en fonction signifie également que le renvoi de la dernière valeur actuelle, tandis que d'autres cadres peuvent renvoyer les valeurs "périmées" même après la mise à jour de la valeur. Cela signifie également que tout signal peut être facilement lié à la valeur calculée et mémorisé:
createEffect(() => console.log(`Hello ${name()}`))Cela créera un signal en lecture seule qui peut être accessible à l'aide de NameLength (). Sa valeur sera mise à jour en réponse à toute modification de la valeur du signal de nom.
Si le signal Name () est inclus dans le composant, le composant s'abonnera automatiquement à ce signal et renvoie lorsque sa valeur change:
setName("Wonder Woman")La mise à jour de la valeur du signal de nom avec setName fera que Hellocomponent rendera. De plus, la fonction Hellocomponent est appelée une seule fois pour créer le HTML pertinent. Une fois qu'elle est appelée, il n'a pas besoin d'exécuter à nouveau, même s'il y a une mise à jour de la valeur du signal de nom. Cependant, dans React, les fonctions de composants sont appelées chaque fois que des changements se produisent dans les valeurs qu'ils contiennent.
Une autre différence majeure pour Solid est que bien qu'il utilise JSX pour la logique de vue, il n'utilise pas du tout Virtual Dom. Au lieu de cela, il précompila le code à l'aide d'outils de construction Vite Modern. Cela signifie qu'il y a moins de JavaScript qui doit être livré et qu'aucune bibliothèque solide réelle ne doit être livrée avec elle (très similaire à Svelte). Les vues sont construites en HTML. Ensuite, utilisez le système de texte de modèle pour reconnaître toutes les modifications, puis effectuez de bonnes opérations DOM à l'ancienne pour une mise à jour à grain fine dynamiquement.
Ces mises à jour d'isolement et de grains fins vers des zones spécifiques du DOM sont très différentes de l'approche de React pour reconstruire complètement un Dom virtuel après tout changement. Les mises à jour directes du DOM réduisent les frais généraux du maintien du DOM virtuel et le rendent extrêmement rapide. En fait, Solid a des données impressionnantes en termes de vitesses de rendu, deuxième seulement en JavaScript natif.
Tous les repères peuvent être consultés ici.
Signal dans Angular
Comme mentionné précédemment, Angular a récemment adopté des signaux pour les mises à jour à grain fin. Ils fonctionnent de manière similaire aux signaux en solide, mais sont créés légèrement différemment.
Pour créer un signal, vous pouvez utiliser la fonction de signal et passer la valeur initiale en tant que paramètre:
const nameLength = createMemo(() => name().length)
Le nom de variable affecté au signal (nom dans l'exemple ci-dessus) peut ensuite être utilisé comme Getter:
const [name, setName] = createSignal("Diana Prince");Le signal a également une méthode définie qui peut être utilisée pour mettre à jour sa valeur comme indiqué ci-dessous:
const [name, setName] = useState("Diana Prince");La méthode de mise à jour à grain fin en angulaire est presque la même que dans Solid. Tout d'abord, Angular a une méthode de mise à jour () qui fonctionne similaire à SET, mais tire des valeurs au lieu de substituer les valeurs:
createEffect(() => console.log(`Hello ${name()}`))La seule différence ici est de prendre la valeur (nom) en tant que paramètre et d'exécuter l'instruction à ce sujet (.touppercase ()). Ceci est utile lorsque la valeur finale du Getter en cours de remplacement est inconnue et doit être dérivée.
Deuxièmement, Angular a également une fonction calculée () pour créer des signaux mémorisés. Cela fonctionne exactement de la même manière que CreateMemo de Solid:
setName("Wonder Woman")Comme le solide, la valeur du signal calculé change chaque fois qu'une variation de la valeur du signal dans la fonction de calcul est détectée.
Enfin, Angular a la fonction Effect (), qui fonctionne exactement de la même manière que la fonction createEFffect () en solide. Chaque fois que la valeur dont il dépend est mise à jour, les effets secondaires sont réexécutés:
const nameLength = createMemo(() => name().length)
Autres caractéristiques du solide
Ce ne sont pas seulement des signaux qui rendent une attention particulière. Comme nous l'avons déjà mentionné, il est très rapide de créer et de mettre à jour du contenu. Il a également une API très similaire à réagir, il devrait donc être facile de commencer pour quiconque a déjà utilisé React. Cependant, Solid fonctionne très différemment à la couche sous-jacente et fonctionne généralement mieux.
Une autre fonctionnalité agréable de Solid est qu'il ajoute des fonctionnalités intelligentes à JSX, telles que le flux de contrôle. Il nous permet de créer une boucle pour une boucle à l'aide du composant
De plus, le composant
Pour tous ceux qui veulent essayer Solid, il y a un excellent tutoriel d'introduction sur le site Web solide où nous pouvons expérimenter le code dans Solid Playground.
Conclusion
Dans cet article, nous présentons le concept de signaux et comment ils sont utilisés en solide et angulaire. Nous avons également examiné comment ils aident Solid à effectuer des mises à jour à grain fin à DOM sans avoir besoin de DOM virtuel. De nombreux cadres adoptent désormais des paradigmes de signalisation, donc ce sont certainement les astuces que nous devrions maîtriser!
FAQ sur les signaux en javascript
Le traitement des événements traditionnels en JavaScript implique de joindre un écouteur d'événements à un élément DOM et de répondre aux interactions utilisateur ou aux événements système. Cependant, cette approche peut devenir complexe et difficile à gérer dans de grandes applications. D'un autre côté, les signaux fournissent une approche granulaire plus fine de la réactivité. Ils vous permettent de créer des unités de comportement réactif indépendantes qui peuvent être combinées pour créer des interactions complexes. Contrairement aux auditeurs d'événements, les signaux ne sont pas liés à un élément ou un type d'événement DOM spécifique, ce qui les rend plus flexibles et plus faciles à réutiliser dans différentes parties de l'application.
Les signaux sont conçus pour être efficaces et performants. Ils utilisent des modèles réactifs basés sur Pull, ce qui signifie qu'ils ne calculent leurs valeurs que lorsque cela est nécessaire. Cela peut entraîner des améliorations significatives des performances dans les applications avec des comportements réactifs complexes, car des calculs inutiles peuvent être évités. Cependant, les différences de performances exactes dépendront du cas d'utilisation spécifique et du degré d'optimisation du modèle réactif.
Oui, les signaux peuvent être utilisés avec d'autres frameworks JavaScript tels que React ou Vue. Ils peuvent être intégrés dans les systèmes réactifs de ces cadres pour fournir une flexibilité et un contrôle supplémentaires sur le comportement des réponses. Cependant, il est important de noter que chaque cadre a sa propre façon de gérer la réactivité, vous devez donc comprendre comment les signaux s'inscrivent dans le modèle.
Le débogage des applications JavaScript qui utilisent les signaux peuvent être légèrement différents de la débogage des applications traditionnelles axées sur les événements. Étant donné que le signal n'est pas lié à un événement ou à un élément DOM spécifique, vous devez suivre le flux de données dans le signal et ses dépendances. Des outils comme Chrome Devtools sont utiles pour cela, car ils vous permettent de parcourir le code et de vérifier l'état du signal à chaque étape.
Bien que les signaux offrent de nombreux avantages, ils ont également certaines limites. Un inconvénient potentiel est qu'ils peuvent rendre votre code plus complexe et difficile à comprendre, en particulier pour les développeurs qui ne connaissent pas le concept de réactivité. En outre, comme les signaux sont des concepts relativement nouveaux en JavaScript, il peut y avoir moins de ressources et un support communautaire disponibles que des modèles et des cadres plus matures.
L'application JavaScript à l'aide de signaux peut être testée en utilisant les mêmes techniques que toute autre application JavaScript. Vous pouvez utiliser des tests unitaires pour tester les signaux individuels et leur comportement, et utiliser des tests d'intégration pour tester comment les signaux interagissent entre eux et avec d'autres parties de votre application. Des outils comme la plaisanterie ou le moka peuvent être utilisés à cet effet.
Oui, le signal peut être utilisé dans l'environnement Node.js. Ils ne sont pas liés au navigateur ou à DOM, ils peuvent donc être utilisés dans n'importe quel environnement JavaScript. Cela en fait un outil puissant pour construire un comportement réactif dans les applications côté serveur.
La méthode de gestion des erreurs dans les applications JavaScript à l'aide de signaux est similaire à toute autre application JavaScript. Vous pouvez utiliser le bloc Try / Catch pour attraper des erreurs et les gérer correctement. De plus, vous pouvez utiliser des signaux d'erreur pour propager les erreurs via le graphique du signal et les traiter de manière centralisée.
Oui, les signaux peuvent être utilisés pour créer des applications en temps réel. Ils fournissent un moyen puissant de gérer et de répondre aux mises à jour de données en temps réel, ce qui en fait un excellent choix pour les applications telles que les applications de chat, les tableaux de bord en temps réel et les jeux multijoueurs.
Optimisation des performances des applications JavaScript qui utilisent des signaux implique une gestion minutieuse des dépendances du signal et d'éviter les calculs inutiles. Vous pouvez utiliser des outils comme Chrome Devtools pour analyser votre application et identifier les goulots d'étranglement des performances. De plus, vous pouvez utiliser des techniques telles que la mémoire et l'évaluation des retards pour améliorer les performances de votre signal.
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!
Comment défendre les serveurs cloud contre les attaques DDoS
utilisation de la fonction de palette de couleurs
Quelle est la différence entre php et java
Commande de fermeture du port CMD
Comment réinstaller le système informatique
Quel logiciel est Xiaohongshu ?
Comment enregistrer un e-mail professionnel
La différence entre les notes de bas de page et les notes de fin
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
