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"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Es gibt nur wenige Lifecycle-Methoden in Solid, da alles innerhalb des reaktiven Systems lebt und stirbt. Das reaktive System wird synchron erzeugt und aktualisiert, so dass die einzigen Zwischenschritte in Effekten bestehen, die ans Ende der Aktualisierung geschoben werden."
    }), "\n", jsxs(_components.p, {
      children: ["Wir haben festgestellt, dass Entwickler bei einfachen Aufgaben oft nicht auf diese Weise denken, und um ihnen die Dinge etwas einfacher zu machen, haben wir einen nicht-verfolgten ", jsx(_components.code, {
        children: "createEffect"
      }), "-Aufruf mit ", jsx(_components.code, {
        children: "onMount"
      }), " verfügbar gemacht. Es ist nur ein Effekt-Aufruf, aber Du kannst ihn in der Sicherheit einsetzen, dass er nur ein Mal pro Komponente laufen wird, sobald diese initial gerendert wurde."]
    }), "\n", jsxs(_components.p, {
      children: ["Lass uns ", jsx(_components.code, {
        children: "onMount"
      }), " benutzen, um ein paar Photos zu holen:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-keyword",
          children: "async"
        }), " () => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " res = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fetch"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "`https://jsonplaceholder.typicode.com/photos?_limit=20`"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setPhotos"
        }), "(", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " res.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "json"
        }), "());\n});\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Lifecycle-Methoden laufen nur im Browser, daher hat man den Vorteil, dass er nicht während des serverseitigen Rendering läuft. Obwohl wir in diesem Beispiel Daten vom Server laden, machen wir das normalerweise mit Resource für echte Server-/Browser-Koordination."
    })]
  });
}
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-c532d5db.js.map
