
Il n'utilise pas de DOM virtuel. Au lieu de cela, il choisit de compiler ses modèles vers de vrais nœuds DOM et d'envelopper les mises à jour dans des réactions à grain fin. De cette façon, lorsque votre état met à jour uniquement le code qui en dépend, il s'exécute. Voici quelques principales caractéristiques de Solid :
- DOM réel avec des mises à jour fines (pas de DOM virtuel, Pas de boucle de contrôle de vérification) ;
- données déclaratives : primitives composables simples sans règles cachées, composants de fonction sans besoin de méthodes de cycle de vie ou d'objets de configuration spécialisés, rendre une fois le modèle mental ;
- le compilateur de Solid ne comprendra que des parties de la bibliothèque que vous utilisez ;
- prend en charge les fonctionnalités modernes telles que JSX, Fragments, Context, Portals, Suspense, SSR, Error Boundaries et Asynchronous Rendering ;
- construit sur TypeScript ;
- compatible avec les composants Web : API de contexte qui s'étend sur les éléments personnalisés, délégation d'événements implicite avec le reciblage du Shadow DOM, portails du DOM fantôme ;
- débogage transparent : un <div> est juste un div.
La gestion des données de Solid repose sur un ensemble de primitives réactives flexibles. Semblable à React Hooks, sauf qu'au lieu de modifier la liste blanche d'un composant propriétaire, il est seul responsable de toutes les mises à jour. Grâce à l'utilisation de proxys et de setters explicites, cela donne le contrôle d'une interface immuable et les performances d'une interface mutable. Les setters prennent en charge une variété de formes, mais pour commencer, vous devez définir et mettre à jour l'état avec un objet.
Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { createState, onCleanup } from "solid-js"; const CountingComponent = () => { const [state, setState] = createState({ counter: 0 }); const interval = setInterval( () => setState({ counter: state.counter + 1 }), 1000 ); onCleanup(() => clearInterval(interval)); return <div>{state.counter}</div>; }; |
Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 | const [state, setState] = createState({ user: { firstName: "Jake", lastName: "Smith" }}) createEffect(() => setState({ displayName: `${state.user.firstName} ${state.user.lastName}` }) ); console.log(state.displayName); // Jake Smith setState('user', {firstName: "Jacob" }); console.log(state.displayName); // Jacob Smith |
Source : Solid
Et vous ?

Voir aussi




