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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span",
    blockquote: "blockquote",
    a: "a"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Signale sind verfolgbare Werte, aber sie sind nur eine Hälfte der Gleichung. Um diese zu ergänzen, gibt es Beobachter, die durch sie aktualisiert werden können. Ein ", jsx(_components.em, {
        children: "Effekt"
      }), " ist ein solcher Beobachter; er führt einen Seiteneffekt aus, der von Signalen abhängt."]
    }), "\n", jsxs(_components.p, {
      children: ["Ein Effekt kann erzeugt werden, indem man ", jsx(_components.code, {
        children: "createEffect"
      }), " aus ", jsx(_components.code, {
        children: "solid-js"
      }), " importiert und es mit einer Funktion als Parameter aufruft. Der Effekt schreibt sich dann automatisch für alle Änderungen in den Signalen ein, die zur Laufzeit der Funktion aufgerufen werden und läuft noch einmal, wenn sich einer von ihnen ändert."]
    }), "\n", jsxs(_components.p, {
      children: ["Bauen wir einen Effekt, der läuft, wenn sich ", jsx(_components.code, {
        children: "count"
      }), " ändert:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", 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 count is now\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "());\n});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Um unser ", jsx(_components.code, {
        children: "count"
      }), "-Signal zu aktualisieren, hängen wir einen Klick-Handler an unseren Knopf:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<button onClick={", 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-title class_",
          children: "Click"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Me"
        }), "</button>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Jetzt wird beim Klick auf den Knopf in die Konsole geschrieben. Das ist ein relativ einfaches Beispiel, aber um zu verstehen, wie Solid funktioniert, stelle man sich vor, dass jeder Ausdruck in JSX ein eigener Effekt ist, der neu ausgeführt wird, sobald eine Signal-Abhängigkeit sich ändert. So funktioniert alles Rendering in Solid: aus Solids Perspektive ", jsx(_components.em, {
        children: "ist alles Rendering nur ein Seiteneffekt des reaktiven Systems"
      }), "."]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["Effekte, die Entwickler mit ", jsx(_components.code, {
          children: "createEffect"
        }), " erstellen, laufen erst, wenn das Rendering abgeschlossen ist und werden meistens verwendet, um Aktualisierungen auszuführen, die mit dem DOM interagieren. Falls man das DOM noch früher anpassen möchte, nutze man ", jsx(_components.a, {
          href: "https://www.solidjs.com/docs/latest/api#createrendereffect",
          children: jsx(_components.code, {
            children: "createRenderEffect"
          })
        }), "."]
      }), "\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=lesson-a4c75e17.js.map
