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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Reaktivität",
  "children": [{
    "depth": 2,
    "value": "Einleitung in die Primitiven",
    "children": []
  }, {
    "depth": 2,
    "value": "Wie es funktioniert",
    "children": []
  }, {
    "depth": 2,
    "value": "Überlegungen",
    "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: "reaktivität",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#reaktivität",
        children: "#"
      }), "Reaktivität"]
    }), "\n", jsx(_components.p, {
      children: "Die Datenverwaltung in Solid baut auf einer Reihe von flexiblen reaktiven Primitiven auf, die verantwortlich für alle Updates sind. Sie nimmt dazu einen sehr ähnlichen Ansatz wie MobX oder Vue, außer dass die Granularität nicht zugunsten eines VDOM eingeschränkt wird. Abhängigkeiten werden automatisch verfolgt wenn die reaktiven Werte in den Effekten und im JSX-Code ausgelesen werden."
    }), "\n", jsxs(_components.p, {
      children: ["Solids Primitiven kommen in der Form von ", jsx(_components.code, {
        children: "create"
      }), "-Aufrufen, die häufig Tupel zurückgeben, deren erstes Element generell den Lese- und das zweite den Schreibzugriff ermöglicht. Normalerweise benennt man den lesbaren Teil beim Namen der Primitive."]
    }), "\n", jsxs(_components.p, {
      children: ["Hier ist ein einfacher automatisch hoch laufender Zähler, der durch das Schreiben des ", jsx(_components.code, {
        children: "count"
      }), "-Signals aktualisiert wird."]
    }), "\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\""
        }), ";\r\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\""
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "App"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), "),\r\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: "setCount"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() + ", jsx(_components.span, {
          className: "hljs-number",
          children: "1"
        }), "), ", jsx(_components.span, {
          className: "hljs-number",
          children: "1000"
        }), ");\r\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));\r\n\r\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"
            }), ">"]
          }), "{count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\r\n\r\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: "einleitung-in-die-primitiven",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#einleitung-in-die-primitiven",
        children: "#"
      }), "Einleitung in die Primitiven"]
    }), "\n", jsx(_components.p, {
      children: "Die Reaktivität in Solid besteht aus 3 primären Primitiven, Signal, Memo und Effekt. Ihr Kern basiert auf dem Observer-Pattern, in dem Signale (und Memos) durch das Verpacken von Memos und Effekten verfolgt werden."
    }), "\n", jsx(_components.p, {
      children: "Signale sind die einfachste Primitiven. Sie enthalten einen Wert und Lese- und Schreibfunktionen, so dass man Lese- und Schreibzugriffe abfangen kann."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Effekte sind Funktionen, in die Lesezugriffe auf Signale verpackt werden und die ausgeführt werden, wann immer der Wert eines Signals, auf dem der Effekt basiert, verändert wird. Das ist nützlich, um Seiteneffekte zu behandeln, wie 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: "\"The latest count is\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()));\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Memos sind zwischengespeicherte von Signalen abgeleitete Werte. Sie haben die Eigenschaften sowohl von Signalen als auch von Effekten. Sie verfolgen die Signale, auf denen sie basieren und werden neu ausgeführt, wenn sich deren Werte ändern und sind selbst verfolgbare Signale."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fullName = ", 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: "${firstName()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${lastName()}"
          }), "`"]
        }), ");\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "wie-es-funktioniert",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#wie-es-funktioniert",
        children: "#"
      }), "Wie es funktioniert"]
    }), "\n", jsx(_components.p, {
      children: "Signale sind Event-Sender, die eine Liste von Empfängern beinhalten. Die Empfänger werden benachrichtigt, wenn sich der Wert ändert."
    }), "\n", jsx(_components.p, {
      children: "Wo die Dinge interessanter werden ist, wie diese Empfänger registriert werden. Solid benutzt eine automatische Verfolgung von Abhängigkeiten. Aktualisierungen passieren automatisch, sobald sich die Daten ändern."
    }), "\n", jsx(_components.p, {
      children: "Der Trick ist ein globaler Stack zur Laufzeit. Bevor ein Effekt oder Memo sein Funktions-Argument (nochmal) ausführt, lädt es sich auf diesen Stack. Danach prüft jedes Signal, das gelesen wird, ob ein gegenwärtiger Empfänger auf dem Stack ist und falls ja, fügt es diesen zu seinen registrierten Empfängern hinzu."
    }), "\n", jsx(_components.p, {
      children: "Man kann sich das so vorstellen:"
    }), "\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"
        }), ") {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " subscribers = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Set"
        }), "();\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "read"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " listener = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getCurrentListener"
        }), "();\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (listener) subscribers.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(listener);\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " value;\r\n  };\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "write"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "nextValue"
        }), ") => {\r\n    value = nextValue;\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "for"
        }), " (", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " sub ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "of"
        }), " subscribers) sub.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "run"
        }), "();\r\n  };\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [read, write];\r\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Jetzt wissen wir bei jeder Aktualisierung, welche Effekte neu aufgerufen werden müssen. Einfach, aber effektiv. Die tatsächliche Implementierung ist wesentlich komplizierter, aber das ist die Quintessenz dessen, was passiert."
    }), "\n", jsx(_components.p, {
      children: "Für ein detaillierteres Verständnis, wie Reaktivität funktioniert, gibt es diese nützlichen Artikel:"
    }), "\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: "überlegungen",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#überlegungen",
        children: "#"
      }), "Überlegungen"]
    }), "\n", jsx(_components.p, {
      children: "Dieser Ansatz zur Reaktivität ist sehr mächtig und dynamisch. Er kann Abhängigkeitsveränderungen während der Ausführung durch verschiedene Zweige von konditionalem Code handhaben. Jede Funktion innerhalb eines verfolgten Kontextes wird ebenfalls verfolgt."
    }), "\n", jsx(_components.p, {
      children: "Allerdings gibt es ein paar grundsätzliche Verhaltensweisen und Kompromisse, die man kennen sollte."
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Alle Reaktivität von Funktionsaufrufen wird verfolgt, egal ob direkt oder hinter einem Getter/Proxy und ausgelöst durch Zugriff auf eine Eigenschaft. Das bedeutet, wo man auf Eigenschaften reaktiver Objekte zugreift, ist wichtig."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Komponenten und Callbacks von Kontrollflüssen sind keine Verfolgungskontexte und werden nur einmal ausgeführt. Das bedeutet, Destructuring oder Logik auf der obersten Ebene wird nicht nochmal ausgeführt. Die Signale, Stores und Props müssen innerhalb anderer reaktiver Primitiven aufgerufen werden, damit der Code nochmal ausgeführt wird."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Diese Herangehensweise trackt nur synchron. Wenn es einen setTimeout oder eine asynchrone Funktion in einem Effekt hat, wird der Code, der danach ausgeführt wird, nicht verfolgt."
        }), "\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-c43c6ab5.js.map
