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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Reattività",
  "children": [{
    "depth": 2,
    "value": "Presentazione dei primitivi",
    "children": []
  }, {
    "depth": 2,
    "value": "Come funziona",
    "children": []
  }, {
    "depth": 2,
    "value": "Considerazioni",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    code: "code",
    pre: "pre",
    span: "span",
    h2: "h2",
    ol: "ol",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "reattività",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#reattività",
        children: "#"
      }), "Reattività"]
    }), "\n", jsx(_components.p, {
      children: "La gestione dei dati in Solid utilizza primitive reattive che sono responsabili di tutti gli aggiornamenti. Utilizza un approccio molto simile a MobX o Vue, tranne per il fatto che non scambia mai la sua granularità con un VDOM. Le dipendenze vengono tracciate automaticamente quando accedi ai tuoi valori reattivi in Effetti e codice JSX."
    }), "\n", jsxs(_components.p, {
      children: ["Le primitive di Solid sono chiamate ", jsx(_components.code, {
        children: "create"
      }), " che spesso restituiscono tuple. Generalmente il primo elemento è una primitiva leggibile e il secondo è un setter. È comune riferirsi solo alla parte leggibile con il nome primitivo."]
    }), "\n", jsxs(_components.p, {
      children: ["Ecco un contatore di incremento automatico di base che si aggiorna in base all'impostazione del segnale ", jsx(_components.code, {
        children: "count"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal, onCleanup } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n", 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-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "App"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [counteggio, setCounteggio] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), "),\n    timer = ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "setInterval"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCounteggio"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "counteggio"
        }), "() + ", jsx(_components.span, {
          className: "hljs-number",
          children: "1"
        }), "), ", jsx(_components.span, {
          className: "hljs-number",
          children: "1000"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "clearInterval"
        }), "(timer));\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"
            }), ">"]
          }), "{counteggio()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\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: "\"app\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "presentazione-dei-primitivi",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#presentazione-dei-primitivi",
        children: "#"
      }), "Presentazione dei primitivi"]
    }), "\n", jsx(_components.p, {
      children: "Solid è costituito da 3 primitive primarie, Segnale, Memo ed Effetto. Al centro c'è il pattern Observer in cui i segnali (e i promemoria) vengono tracciati avvolgendo i promemoria e gli effetti."
    }), "\n", jsx(_components.p, {
      children: "I segnali sono la primitiva più semplice. Contengono valore e ottengono e impostano funzioni in modo da poter intercettare quando vengono letti e scritti."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [counteggio, setCounteggio] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Gli effetti sono funzioni che forniscono letture del nostro segnale. Viene eseguito nuovamente ogni volta che il valore di un segnale dipendente cambia. Questo è utile per creare effetti collaterali, come il rendering."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"L'ultimo conteggio è \""
        }), ", ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "counteggio"
        }), "()));\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Infine, i Memo sono valori derivati memorizzati nella cache. Condividono le proprietà di entrambi i segnali e gli effetti. Tracciano i propri segnali dipendenti, rieseguendoli solo quando questi cambiano e sono essi stessi segnali tracciabili."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " nome = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${nomeBattsimo()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${cognome()}"
          }), "`"]
        }), ");\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "come-funziona",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#come-funziona",
        children: "#"
      }), "Come funziona"]
    }), "\n", jsx(_components.p, {
      children: "I segnali sono emettitori di eventi che contengono un elenco di abbonamenti. Notificano ai loro abbonati ogni volta che il loro valore cambia."
    }), "\n", jsx(_components.p, {
      children: "Dove le cose si fanno più interessanti è come avvengono questi abbonamenti. Solid utilizza il monitoraggio automatico delle dipendenze. Gli aggiornamenti avvengono automaticamente quando i dati cambiano."
    }), "\n", jsx(_components.p, {
      children: "Il trucco è uno stack globale in fase di esecuzione. Prima che un Effetto o Memo esegua (o riesegui) la sua funzione fornita dallo sviluppatore, si spinge su quello stack. Quindi qualsiasi segnale che viene letto controlla se c'è un listener corrente nello stack e in tal caso aggiunge il listener alle sue sottoscrizioni."
    }), "\n", jsx(_components.p, {
      children: "Puoi pensarla così:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "value"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " iscritti = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Set"
        }), "();\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "leggere"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " listener = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getCurrentListener"
        }), "();\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (listener) iscritti.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(listener);\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " valore;\n  };\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "scrivi"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "nextValue"
        }), ") => {\n    valore = valoreSuccessivo;\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "for"
        }), " (", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " isc ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "of"
        }), " iscritti) isc.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "run"
        }), "();\n  };\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [read, scrivi];\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Ora ogni volta che aggiorniamo il segnale sappiamo quali effetti eseguire nuovamente. Semplice ma efficace. L'effettiva implementazione è molto più complicata, ma questo è il succo di ciò che sta accadendo."
    }), "\n", jsx(_components.p, {
      children: "Per una comprensione più dettagliata di come funziona Reattività, questi sono articoli utili (in inglese):"
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf",
        children: "A Hands-on Introduction to Fine-Grained Reactivity"
      })
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p",
        children: "Building a Reactive Library from Scratch"
      })
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering",
        children: "SolidJS: Reactivity to Rendering"
      })
    }), "\n", jsxs(_components.h2, {
      id: "considerazioni",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#considerazioni",
        children: "#"
      }), "Considerazioni"]
    }), "\n", jsx(_components.p, {
      children: "Questo approccio alla reattività è molto potente e dinamico. Può gestire le dipendenze che cambiano al volo eseguendo diversi rami di codice condizionale. Funziona anche attraverso molti livelli di indiretto. Viene tracciata anche qualsiasi funzione eseguita all'interno di un ambito di tracciamento."
    }), "\n", jsx(_components.p, {
      children: "Ci sono alcuni comportamenti chiave e compromessi di cui dobbiamo essere consapevoli."
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Tutta la reattività viene tracciata direttamente dalle chiamate di funzione. Possono anche essere nascosti sotto getter/proxy e attivati ​​dall'accesso alla proprietà. Ciò significa che è importante dove si accede alle proprietà sugli oggetti reattivi."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "I componenti ei callback dai flussi di controllo non tengono traccia degli ambiti. Eseguono solo una volta. Ciò significa che la destrutturazione o l'esecuzione della logica di primo livello nei componenti non verrà rieseguita. È necessario accedere a questi segnali, negozi e oggetti di scena dall'interno di altre primitive reattive o JSX per quella parte del codice da rivalutare."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Questo approccio tiene traccia solo in modo sincrono. Se hai un setTimeout o usi una funzione asincrona nel tuo effetto, verrà eseguito asincrono. Quindi non verrà più tracciato."
        }), "\n"]
      }), "\n"]
    })]
  });
}
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=reactivity-67688030.js.map
