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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Rendering",
  "children": [{
    "depth": 2,
    "value": "Compilazione JSX",
    "children": []
  }, {
    "depth": 2,
    "value": "Attributi e oggetti di scena",
    "children": []
  }, {
    "depth": 2,
    "value": "Entrata",
    "children": []
  }, {
    "depth": 2,
    "value": "Componenti",
    "children": []
  }, {
    "depth": 2,
    "value": "Oggetti di scena",
    "children": []
  }, {
    "depth": 2,
    "value": "Children",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    code: "code",
    pre: "pre",
    span: "span",
    blockquote: "blockquote",
    strong: "strong",
    em: "em"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rendering",
        children: "#"
      }), "Rendering"]
    }), "\n", jsx(_components.p, {
      children: "Solid supporta 3 tipi di template: JSX, Tagged Template Literals e la variante HyperScript di Solid. JSX è la forma predominante. Perché? JSX è un ottimo DSL creato per la compilazione. Ha una sintassi chiara, supporta TypeScript, funziona con Babel e supporta altri strumenti come l'evidenziazione della sintassi del codice e più carino. Era solo pragmatico usare uno strumento che fondamentalmente ti dà tutto gratuitamente. Come soluzione compilata fornisce un ottimo DX. Abbiamo scelto di non lottare con le sintassi DSL personalizzate e di usarne una ampiamente supportata."
    }), "\n", jsxs(_components.h2, {
      id: "compilazione-jsx",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#compilazione-jsx",
        children: "#"
      }), "Compilazione JSX"]
    }), "\n", jsx(_components.p, {
      children: "Il rendering prevede la precompilazione di modelli JSX in codice js nativo ottimizzato. I costrutti del codice JSX sono:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Elementi template DOM (clonati su ogni istanza)"
      }), "\n", jsx(_components.li, {
        children: "Una serie di dichiarazioni di riferimento che utilizzano solo firstChild e nextSibling"
      }), "\n", jsx(_components.li, {
        children: "Calcoli a grana fine per aggiornare gli elementi creati."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Questo approccio è più performante e produce meno codice rispetto alla creazione di ogni elemento individualmente con document.createElement."
    }), "\n", jsxs(_components.h2, {
      id: "attributi-e-oggetti-di-scena",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#attributi-e-oggetti-di-scena",
        children: "#"
      }), "Attributi e oggetti di scena"]
    }), "\n", jsx(_components.p, {
      children: "Tentativi solidi di seguire il più possibile le convenzioni HTML, inclusa l'insensibilità alle maiuscole degli attributi."
    }), "\n", jsxs(_components.p, {
      children: ["La maggior parte di tutti gli attributi sull'elemento nativo JSX sono impostati come attributi DOM. I valori statici sono incorporati direttamente nel modello clonato. Ci sono un certo numero di eccezioni come ", jsx(_components.code, {
        children: "class"
      }), ", ", jsx(_components.code, {
        children: "style"
      }), ", ", jsx(_components.code, {
        children: "value"
      }), ", ", jsx(_components.code, {
        children: "innerHTML"
      }), " che forniscono funzionalità extra."]
    }), "\n", jsxs(_components.p, {
      children: ["Gli elementi personalizzati (ad eccezione dei built-in nativi) sono predefiniti come proprietà quando sono dinamici. Questo serve per gestire tipi di dati più complessi. Esegue questa conversione in base ai nomi degli attributi dei casi di serpente standard dell'involucro del cammello da ", jsx(_components.code, {
        children: "some-attr"
      }), " a ", jsx(_components.code, {
        children: "someAttr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["È anche possibile controllare questo comportamento direttamente con le direttive dello spazio dei nomi. Puoi forzare un attributo con ", jsx(_components.code, {
        children: "attr:"
      }), " o ", jsx(_components.code, {
        children: "prop:"
      })]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<my-element ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "UniqACC"
        }), "={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "attr"
        }), ":titolo={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "titolo"
        }), "} />\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Nota:"
        }), " gli attributi statici vengono creati come parte del modello html che viene clonato. Le espressioni fisse e dinamiche vengono applicate successivamente nell'ordine di associazione JSX. Questo va bene per la maggior parte degli elementi DOM ma ce ne sono alcuni, come gli elementi di input con ", jsx(_components.code, {
          children: "type='range'"
        }), ", dove l'ordine conta. Ricordalo quando leghi gli elementi."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "entrata",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#entrata",
        children: "#"
      }), "Entrata"]
    }), "\n", jsxs(_components.p, {
      children: ["Il modo più semplice per montare Solid è importare il rendering da 'solid-js/web'. ", jsx(_components.code, {
        children: "render"
      }), " riceve una funzione come primo argomento e l'elemento di montaggio per il secondo. Restituirà un metodo di smaltimento. Questo ", jsx(_components.code, {
        children: "render"
      }), " crea automaticamente la radice reattiva e gestisce il rendering nel contenitore di montaggio. Per prestazioni ottimali, utilizzare un elemento senza figli."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { render } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js/web\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"main\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Importante"
        }), " Il primo argomento deve essere una funzione. In caso contrario, non possiamo tracciare e programmare correttamente il sistema reattivo. Se lo fai in modo errato, i tuoi effetti non verranno eseguiti."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "componenti",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#componenti",
        children: "#"
      }), "Componenti"]
    }), "\n", jsx(_components.p, {
      children: "I componenti in Solid sono solo funzioni in maiuscolo Pascal. Il loro primo argomento è un oggetto props e restituiscono nodi DOM reali."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Primo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Secondo"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "saluto"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Salve\""
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Davide", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Secondo"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n);\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Secondo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.saluto}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    {props.children}\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Tutti i nodi JSX sono nodi DOM effettivi. Non c'è magia qui. I componenti di primo livello li aggiungono al DOM stesso."
    }), "\n", jsxs(_components.h2, {
      id: "oggetti-di-scena",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#oggetti-di-scena",
        children: "#"
      }), "Oggetti di scena"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid consente di definire le proprietà sui componenti per passare i dati ai componenti figlio. Questo è simile a React, Vue, Angular e altri framework. Qui un componente genitore sta passando la stringa \"Hello\" al componente ", jsx(_components.code, {
        children: "Label"
      }), " tramite una proprietà ", jsx(_components.code, {
        children: "greeting"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Primo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Secondo"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "saluto"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"salve\""
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "David", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Secondo"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Il valore impostato su \"saluto\" è statico, ma possiamo anche impostare valori dinamici. Per esempio:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Primo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [saluto, impostareSaluto] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Buongiorno\""
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Secondo"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{saluto()}"
            }), ">"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Davide", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Secondo"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n  );\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["I componenti possono accedere alle proprietà passate loro tramite un argomento ", jsx(_components.code, {
        children: "props"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    {props.children}\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["A differenza di altri framework, non è possibile utilizzare la destrutturazione degli oggetti sui ", jsx(_components.code, {
        children: "props"
      }), " di un componente. Dietro le quinte l'oggetto ", jsx(_components.code, {
        children: "props"
      }), " si basa su Object getter per recuperare pigramente i valori. L'uso della destrutturazione degli oggetti interrompe la reattività degli \"sostegni\". Questa è una limitazione naturale e accettabile."]
    }), "\n", jsx(_components.p, {
      children: "Questo esempio mostra il modo \"corretto\" di accedere agli oggetti di scena in Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Qui, `props.name` si aggiornerà come ti aspetteresti"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MioComponentene"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.nome}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Questo esempio mostra il modo sbagliato di accedere agli oggetti di scena in Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Questo è il male"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Qui, `props.name` non si aggiornerà (cioè non è reattivo) poiché è destrutturato in `name`"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MioComponentene"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "{ nome }"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{nome}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Mentre l'oggetto props sembra un oggetto normale quando lo usi, in realtà è adeguatamente reattivo, in qualche modo simile a un segnale. Questo ha alcune implicazioni. Gli utenti dattiloscritti riconosceranno che è digitato come un normale oggetto."
    }), "\n", jsx(_components.p, {
      children: "A differenza della maggior parte dei framework JSX, i componenti delle funzioni di Solid vengono eseguiti solo una volta (anziché ogni ciclo di rendering). L'esempio seguente non funzionerà come previsto."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBase"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valore = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"predefinita\""
        }), ";\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{valore}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Modulo"
        }), "(", jsx(_components.span, {
          className: "hljs-params"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [valore, impostareValore] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ComponenteBase"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "value"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{valore()}"
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), "\n        ", jsx(_components.span, {
              className: "hljs-attr",
              children: "type"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"text\""
            }), "\n        ", jsx(_components.span, {
              className: "hljs-attr",
              children: "oninput"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{(e)"
            }), " =>"]
          }), " impostareValore(e.currentTarget.value)}\n      />\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n  );\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["In realtà vogliamo che il ", jsx(_components.code, {
        children: "ComponenteBase"
      }), " mostri il valore corrente digitato nell'", jsx(_components.code, {
        children: "input"
      }), ". Come promemoria, la funzione ", jsx(_components.code, {
        children: "ComponenteBase"
      }), " viene eseguita solo una volta quando il componente viene creato per la prima volta. A questo punto (durante la creazione), ", jsx(_components.code, {
        children: "props.valore"
      }), " sarà uguale a ", jsx(_components.code, {
        children: "''"
      }), ". Ciò significa che il \"valore const\" in \"BasicComponent\" si risolverà in \"default\" e non si aggiornerà mai. L'accesso agli oggetti di scena mentre l'oggetto ", jsx(_components.code, {
        children: "props"
      }), " è reattivo è al di fuori dell'ambito osservabile di Solid. Quindi verrà automaticamente rivalutato quando cambiano gli oggetti di scena."]
    }), "\n", jsxs(_components.p, {
      children: ["Per risolvere il problema dobbiamo accedere a \"props\" da qualche parte in cui Solid possa osservarlo. Generalmente questo significa all'interno di JSX o all'interno di un ", jsx(_components.code, {
        children: "createMemo"
      }), ", ", jsx(_components.code, {
        children: "createEffect"
      }), " o thunk(", jsx(_components.code, {
        children: "() => ..."
      }), "). Ecco una soluzione che funziona come previsto:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBase"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.valore || \"predefinita\"}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Questo, equivalentemente, può essere issato in una funzione:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBase"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "valore"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => props.", jsx(_components.span, {
          className: "hljs-property",
          children: "valore"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"predefinita\""
        }), ";\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{valore()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Un'altra opzione per calcoli costosi è usare ", jsx(_components.code, {
        children: "createMemo"
      }), ". Per esempio:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBase"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valore = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "valore"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"predefinita\""
        }), ");\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{valore()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "O usando un aiutante"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBase"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  props = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "valore"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"predefinita\""
        }), " }, props);\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.valore}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Come promemoria, i seguenti esempi ", jsx(_components.em, {
        children: "non"
      }), " funzioneranno:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// cattiva"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBase"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "valore"
        }), ": propValore } = props;\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valore = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " propValore || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"predefinita\""
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{valore()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// cattiva"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBase"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " propValore = prop.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ";\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valore = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"predefinita\""
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{valore()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "I componenti di Solid sono la parte fondamentale delle sue prestazioni. L'approccio di Solid a far scomparire i componenti è reso possibile dalla valutazione pigra degli oggetti. A differenza della valutazione immediata delle espressioni prop e del passaggio di valori, l'esecuzione viene posticipata fino a quando non si accede al prop nel figlio. In questo modo rimandiamo l'esecuzione fino all'ultimo momento, in genere proprio nei binding DOM, massimizzando le prestazioni. Ciò appiattisce la gerarchia ed elimina la necessità di mantenere un albero di componenti."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " prop1=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"statica\""
        }), " prop2={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), "} />;\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// compila approssimativamente a:"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// estraiamo il corpo del componente per isolarlo e prevenire costosi aggiornamenti"
        }), "\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "untrack"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Componente"
        }), "({\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop1"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"statica\""
        }), ",\n    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// espressione dinamica quindi avvolgiamo in un getter"
        }), "\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "prop2"
        }), "() {\n      ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dinamica"
        }), ";\n    },\n  })\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Per aiutare a mantenere la reattività, Solid ha un paio di aiutanti:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// oggetti di scena predefiniti"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Italiano\""
        }), " }, props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// clone"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " newProps = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// unire"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props, otherProps);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// sdividere gli oggetti di scena in più oggetti di scena"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [locale, altre] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "splitProps"
        }), "(props, [", jsx(_components.span, {
          className: "hljs-string",
          children: "\"className\""
        }), "])\n<div {...altre} className={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "cx"
        }), "(locale.", jsx(_components.span, {
          className: "hljs-property",
          children: "className"
        }), ", theme.", jsx(_components.span, {
          className: "hljs-property",
          children: "component"
        }), ")} />\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "children",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#children",
        children: "#"
      }), "Children"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid gestisce JSX Children simile a React. Un singolo figlio è un singolo valore su ", jsx(_components.code, {
        children: "props.children"
      }), " e più figli vengono gestiti tramite un array di valori. Normalmente, li passi alla vista JSX. Se vuoi interagire con loro il metodo suggerito è l'helper ", jsx(_components.code, {
        children: "figli"
      }), " che risolve qualsiasi flusso di controllo a valle e restituisce un memo."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// singolo"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Etichetta"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "class"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"etichetta\""
            }), ">"]
          }), "Salve, { props.children }", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Etichetta"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), "Michele", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Etichetta"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// multipla"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.children}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Elenco"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "First", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n  {state.expression}\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Etichetta"
            }), ">"]
          }), "Judith", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Etichetta"
            }), ">"]
          }), "\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Elenco"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// oggetto bambini"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Elenco"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.children}"
            }), ">"]
          }), "{articolo => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{itarticoloem}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// mmodificare e mappare i bambini usando l'helper"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Elenco"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// l'assistente dei bambini memorizza il valore e risolve tutte le reattività intermedie"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " memo = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "bambini"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "children"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " bambini = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "memo"
        }), "();\n    bambini.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "forEach"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "c"
          }), ") =>"]
        }), " c.", jsx(_components.span, {
          className: "hljs-property",
          children: "classList"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"elenco-bambino\""
        }), "))\n  })\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{memo()}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "Importante:"
      }), " Solid tratta i tag inferiori come espressioni costose e li racchiude allo stesso modo delle espressioni reattive dinamiche. Valutano pigramente l'accesso \"prop\". Fai attenzione ad accedervi più volte o a destrutturare prima del punto in cui li useresti nella vista. Solid non ha il lusso di creare nodi DOM virtuali in anticipo e poi di differenziarli. La risoluzione di questi \"sostegni\" deve essere pigra e deliberata. Usa l'helper ", jsx(_components.code, {
        children: "bambini"
      }), " se desideri farlo mentre li memorizza."]
    })]
  });
}
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=rendering-90952598.js.map
