import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Domande Frequenti",
  "children": [{
    "depth": 3,
    "value": "1. JSX senza VDOM? Questo è vaporware? Ho sentito altri autori riconosciuti dire che non era possibile.",
    "children": []
  }, {
    "depth": 3,
    "value": "2. How is Solid so performant?",
    "children": []
  }, {
    "depth": 3,
    "value": "3. Esiste una funzionalità di compatibilità di React?",
    "children": []
  }, {
    "depth": 3,
    "value": "4. Perché la destrutturazione non funziona? Mi sono reso conto che posso risolverlo avvolgendo l'intero componente in una funzione.",
    "children": []
  }, {
    "depth": 3,
    "value": "5. Puoi aggiungere il supporto per i componenti della classe? Trovo che i cicli di vita siano più facili da ragionare.",
    "children": []
  }, {
    "depth": 3,
    "value": "6. Non mi piace molto JSX! C'è qualche possibilità per un modello DSL? Oh, vedo che hai taggato Template Literals/HyperScript. Forse userò quelli...",
    "children": []
  }, {
    "depth": 3,
    "value": "7. Quando uso un Signal vs Store? Perché questi sono diversi?",
    "children": []
  }, {
    "depth": 3,
    "value": "8. Perché non posso semplicemente assegnare un valore a Solid's Store come posso fare in Vue. Svelto o MobX? Dov'è il \"2-way binding\"?",
    "children": []
  }, {
    "depth": 3,
    "value": "8. Perché non posso semplicemente assegnare un valore a Solid's Store come posso fare in Vue. Svelto o MobX? Dov'è il \"binding a 2 vie\"?",
    "children": []
  }, {
    "depth": 3,
    "value": "9. Posso usare la reattività di Solid da sola?",
    "children": []
  }, {
    "depth": 3,
    "value": "10. Solid ha una libreria Next.js o Material Components che posso usare?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "domande-frequenti",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#domande-frequenti",
        children: "#"
      }), "Domande Frequenti"]
    }), "\n", jsxs(_components.h3, {
      id: "1-jsx-senza-vdom-questo-è-vaporware-ho-sentito-altri-autori-riconosciuti-dire-che-non-era-possibile",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-jsx-senza-vdom-questo-è-vaporware-ho-sentito-altri-autori-riconosciuti-dire-che-non-era-possibile",
        children: "#"
      }), "1. JSX senza VDOM? Questo è vaporware? Ho sentito altri autori riconosciuti dire che non era possibile."]
    }), "\n", jsx(_components.p, {
      children: "È possibile quando non hai il modello di aggiornamento di React. JSX è un modello DSL come un altro. Solo uno che è più flessibile in certi modi. L'inserimento di JavaScript arbitrario può essere difficile a volte, ma non è diverso dal supportare gli operatori di diffusione. Quindi no, questo non è impossibile, ma un approccio che si è dimostrato uno dei più performanti."
    }), "\n", jsx(_components.p, {
      children: "Il vero vantaggio è quanto è estensibile. Hai il compilatore che lavora per te dandoti aggiornamenti DOM nativi ottimali ma hai tutta la libertà di una libreria come React per scrivere componenti usando tecniche come Render Props e Higher Order Components insieme ai tuoi \"ganci\" reattivi. Non ti piace come funziona il flusso di controllo di Solid? Scrivi il tuo."
    }), "\n", jsxs(_components.h3, {
      id: "2-how-is-solid-so-performant",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-how-is-solid-so-performant",
        children: "#"
      }), "2. How is Solid so performant?"]
    }), "\n", jsx(_components.p, {
      children: "È difficile individuare qualcosa di specifico. È davvero la combinazione di molte decisioni più specificamente:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "Reattività granulare in modo che vengano tracciate solo le cose che dovrebbero essere reattive."
      }), "\n", jsx(_components.li, {
        children: "Compilare tenendo presente la creazione iniziale. Solid utilizza l'euristica per ridurre la granularità. Ciò riduce il numero di calcoli effettuati, ma mantiene gli aggiornamenti chiave granulari e performanti."
      }), "\n", jsx(_components.li, {
        children: "Le espressioni reattive sono solo funzioni. Ciò consente la \"scomparsa dei componenti\" con valutazione pigra delle prop che rimuove wrapper non necessari e sovraccarico di sincronizzazione."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Queste sono attualmente tecniche uniche in una combinazione che danno a Solid un vantaggio rispetto alla concorrenza."
    }), "\n", jsxs(_components.h3, {
      id: "3-esiste-una-funzionalità-di-compatibilità-di-react",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-esiste-una-funzionalità-di-compatibilità-di-react",
        children: "#"
      }), "3. Esiste una funzionalità di compatibilità di React?"]
    }), "\n", jsx(_components.p, {
      children: "No, e probabilmente non ci sarà mai. Sebbene le API siano simili e i componenti spesso possano essere spostati con piccole modifiche, il modello di aggiornamento è fondamentalmente diverso. React Components esegue il rendering più e più volte quindi il codice al di fuori di Hooks funziona in modo molto diverso. Le chiusure e le regole dei ganci non solo non sono necessarie, ma possono essere utilizzate in modi che qui non funzionano."
    }), "\n", jsx(_components.p, {
      children: "La compatibilità con Vue potrebbe tuttavia essere più realistica. Sebbene non ci siano piani da implementare attualmente."
    }), "\n", jsxs(_components.h3, {
      id: "4-perché-la-destrutturazione-non-funziona-mi-sono-reso-conto-che-posso-risolverlo-avvolgendo-lintero-componente-in-una-funzione",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-perché-la-destrutturazione-non-funziona-mi-sono-reso-conto-che-posso-risolverlo-avvolgendo-lintero-componente-in-una-funzione",
        children: "#"
      }), "4. Perché la destrutturazione non funziona? Mi sono reso conto che posso risolverlo avvolgendo l'intero componente in una funzione."]
    }), "\n", jsx(_components.p, {
      children: "La reattività si verifica all'accesso alla proprietà con oggetti Prop e Store. Il loro riferimento al di fuori di un calcolo vincolante o reattivo non verrà registrato. La destrutturazione è perfettamente a posto all'interno di quelli."
    }), "\n", jsx(_components.p, {
      children: "Annidare l'intero componente in una funzione non è quello che vuoi fare in modo irresponsabile. Solid non ha un VDOM. Quindi qualsiasi modifica tracciata eseguirà nuovamente l'intera funzione ricreando tutto. Non farlo."
    }), "\n", jsxs(_components.h3, {
      id: "5-puoi-aggiungere-il-supporto-per-i-componenti-della-classe-trovo-che-i-cicli-di-vita-siano-più-facili-da-ragionare",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#5-puoi-aggiungere-il-supporto-per-i-componenti-della-classe-trovo-che-i-cicli-di-vita-siano-più-facili-da-ragionare",
        children: "#"
      }), "5. Puoi aggiungere il supporto per i componenti della classe? Trovo che i cicli di vita siano più facili da ragionare."]
    }), "\n", jsx(_components.p, {
      children: "Non è intenzione di supportare i componenti della classe. I cicli di vita di Solid sono legati alla programmazione del sistema reattivo e sono artificiali. Potresti farne una classe, ma in pratica tutto il codice del gestore non di eventi viene fondamentalmente eseguito nel costruttore, inclusa la funzione di rendering."
    }), "\n", jsx(_components.p, {
      children: "Raggruppa i dati e i relativi comportamenti anziché i cicli di vita. Questa è una best practice reattiva che funziona da decenni."
    }), "\n", jsxs(_components.h3, {
      id: "6-non-mi-piace-molto-jsx-cè-qualche-possibilità-per-un-modello-dsl-oh-vedo-che-hai-taggato-template-literalshyperscript-forse-userò-quelli",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#6-non-mi-piace-molto-jsx-cè-qualche-possibilità-per-un-modello-dsl-oh-vedo-che-hai-taggato-template-literalshyperscript-forse-userò-quelli",
        children: "#"
      }), "6. Non mi piace molto JSX! C'è qualche possibilità per un modello DSL? Oh, vedo che hai taggato Template Literals/HyperScript. Forse userò quelli..."]
    }), "\n", jsx(_components.p, {
      children: "Non farlo. Ti fermerò proprio lì. Usiamo JSX nel modo in cui Svelte usa i suoi modelli: per creare istruzioni DOM ottimizzate. Le soluzioni Tagged Template Literal e HyperScript possono essere davvero impressionanti di per sé, ma a meno che tu non abbia una vera ragione come un requisito di non compilazione, sono inferiori in ogni modo. Si traduce in bundle più grandi, prestazioni più lente e la necessità di valori di wrapping per soluzioni alternative manuali."
    }), "\n", jsx(_components.p, {
      children: "È bello avere opzioni, ma JSX di Solid è davvero la soluzione migliore qui. Fidati di noi! Anche un modello DSL sarebbe fantastico. Potrebbe essere un po' più restrittivo, ma JSX ci dà così tanto valore. TypeScript, Parser esistenti, Evidenziazione della sintassi, TypeScript, Più carino, Completamento del codice e, ultimo e non meno importante, TypeScript."
    }), "\n", jsx(_components.p, {
      children: "Altre librerie hanno aggiunto il supporto per queste funzionalità, ma questo è stato uno sforzo enorme ed è ancora imperfetto e un costante mal di testa per la manutenzione. Questo è davvero puntare sul pragmatismo."
    }), "\n", jsxs(_components.h3, {
      id: "7-quando-uso-un-signal-vs-store-perché-questi-sono-diversi",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#7-quando-uso-un-signal-vs-store-perché-questi-sono-diversi",
        children: "#"
      }), "7. Quando uso un Signal vs Store? Perché questi sono diversi?"]
    }), "\n", jsx(_components.p, {
      children: "Gli archivi contengono valori nidificati che lo rendono ideale per strutture di dati profonde e per cose come i modelli. Per la maggior parte delle altre cose, i segnali sono leggeri e portano a termine il lavoro."
    }), "\n", jsxs(_components.p, {
      children: ["Sfortunatamente, poiché non è possibile eseguire il proxy delle primitive, queste idee non possono essere combinate. Le funzioni sono l'interfaccia più semplice e qualsiasi espressione reattiva (incluso l'accesso allo stato) può essere racchiusa in una durante il trasporto, quindi questo fornisce un'API universale. Puoi nominare i tuoi segnali e dichiarare come preferisci e rimane minimo. L'ultima cosa che vorresti fare è forzare la digitazione ", jsx(_components.code, {
        children: ".get()"
      }), " ", jsx(_components.code, {
        children: ".set()"
      }), " o anche peggio ", jsx(_components.code, {
        children: ".value"
      }), ". Almeno il primo può essere alias per brevità, mentre il secondo è solo il modo meno conciso per chiamare una funzione.1"]
    }), "\n", jsxs(_components.h3, {
      id: "8-perché-non-posso-semplicemente-assegnare-un-valore-a-solids-store-come-posso-fare-in-vue-svelto-o-mobx-dovè-il-2-way-binding",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#8-perché-non-posso-semplicemente-assegnare-un-valore-a-solids-store-come-posso-fare-in-vue-svelto-o-mobx-dovè-il-2-way-binding",
        children: "#"
      }), "8. Perché non posso semplicemente assegnare un valore a Solid's Store come posso fare in Vue. Svelto o MobX? Dov'è il \"2-way binding\"?"]
    }), "\n", jsxs(_components.h3, {
      id: "8-perché-non-posso-semplicemente-assegnare-un-valore-a-solids-store-come-posso-fare-in-vue-svelto-o-mobx-dovè-il-binding-a-2-vie",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#8-perché-non-posso-semplicemente-assegnare-un-valore-a-solids-store-come-posso-fare-in-vue-svelto-o-mobx-dovè-il-binding-a-2-vie",
        children: "#"
      }), "8. Perché non posso semplicemente assegnare un valore a Solid's Store come posso fare in Vue. Svelto o MobX? Dov'è il \"binding a 2 vie\"?"]
    }), "\n", jsx(_components.p, {
      children: "La reattività è uno strumento potente ma anche pericoloso. MobX lo sa e ha introdotto la modalità Strict e le azioni per limitare dove/quando si verificano gli aggiornamenti. Non hai bisogno di essere effettivamente immutabile fintanto che fornisci i mezzi per avere lo stesso contratto."
    }), "\n", jsx(_components.p, {
      children: "Avere la possibilità di aggiornare lo stato è probabilmente ancora più importante che decidere di passare lo stato. Quindi essere in grado di separarlo è importante. Anche se la lettura è immutabile. Inoltre, non dobbiamo pagare il costo dell'immutabilità se possiamo ancora aggiornare granulare. Fortunatamente ci sono tonnellate di arte precedente qui tra ImmutableJS e Immer. Ironicamente Solid agisce principalmente come un Immer inverso con i suoi interni mutevoli e l'interfaccia immutabile."
    }), "\n", jsxs(_components.h3, {
      id: "9-posso-usare-la-reattività-di-solid-da-sola",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#9-posso-usare-la-reattività-di-solid-da-sola",
        children: "#"
      }), "9. Posso usare la reattività di Solid da sola?"]
    }), "\n", jsxs(_components.p, {
      children: ["Ovviamente. Anche se non ho esportato un pacchetto autonomo, è facile installare Solid senza il compilatore e utilizzare solo le primitive reattive. Uno dei vantaggi della reattività granulare è che è indipendente dalla libreria. Del resto, quasi tutte le librerie reattive funzionano in questo modo. Questo è ciò che ha ispirato ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), " ed è alla base della ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "libreria DOM Expressions"
      }), " in primo luogo per creare un renderer puramente dal sistema reattivo."]
    }), "\n", jsxs(_components.p, {
      children: ["Per elencarne alcuni da provare: ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), ", [Knockout](", jsx(_components.a, {
        href: "https://github",
        children: "https://github"
      }), " .com/knockout/knockout), ", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelto"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), ", [CellX](https: //github.com/Riim/cellx), ", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), " e anche recentemente ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue "
      }), ". Per creare una libreria reattiva è necessario molto di più che taggarla su un renderer come ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), " per esempio, ma è un buon modo per avere un'idea."]
    }), "\n", jsxs(_components.h3, {
      id: "10-solid-ha-una-libreria-nextjs-o-material-components-che-posso-usare",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#10-solid-ha-una-libreria-nextjs-o-material-components-che-posso-usare",
        children: "#"
      }), "10. Solid ha una libreria Next.js o Material Components che posso usare?"]
    }), "\n", jsxs(_components.p, {
      children: ["Non a mia conoscenza. Se sei interessato a costruirne uno, siamo prontamente disponibili sul nostro ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), " per aiutarti a costruirli. Abbiamo le basi e dobbiamo solo costruirci sopra."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=faq-2ce63092.js.map
