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",
    code: "code",
    pre: "pre",
    span: "span",
    em: "em"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Wir haben gesehen, dass jedes Mal, wenn wir ein Signal in JSX auslesen, es automatisch die Oberfläche aktualisiert, wenn sich das Signal verändert. Aber die Komponenten-Funktionen selbst laufen nur ein Mal."
    }), "\n", jsx(_components.p, {
      children: "Wir können neue Ausdrücke erzeugen, die auf anderen Signalen basieren, indem wir sie in eine Funktion schachteln. Eine Funktion, die ein Signal aufruft, wird damit effektiv selbst ein Signal: wenn die darin enthaltenen Signale aktualisiert werden, wird es von dessen Nutzern aktualisiert."
    }), "\n", jsxs(_components.p, {
      children: ["Lass uns unseren Counter aktualisieren, in dem wir eine ", jsx(_components.code, {
        children: "doubleCount"
      }), "-Funktion hinzufügen:"]
    }), "\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: "doubleCount"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() * ", jsx(_components.span, {
          className: "hljs-number",
          children: "2"
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Wir können nun ", jsx(_components.code, {
        children: "doubleCount"
      }), " genau wie ein Signal im JSX aufrufen:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [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: {doubleCount()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Wir nennen solche Funktionen ", jsx(_components.em, {
        children: "abgeleitete Signale"
      }), ", weil sie ihre Reaktivität durch die Signale erhalten, auf die sie zugreifen. Sie speichern nicht selbst einen Wert (wenn man ein abgeleitetes Signal erstellt, aber nie aufruft, wird es wie jede andere unbenutzte Funktion aus Solids Ausgabe herausgelassen), aber sie aktualisieren alle Effekte, die darauf basieren und lösen ein neues Rendering aus, wenn sie in einer Komponente genutzt werden."]
    })]
  });
}
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-470185d6.js.map
