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: "Die meiste Zeit über sind abgeleitete Signale ausreichend. Allerdings ist es manchmal sinnvoll, Werte zwischenzuspeichern.\nUm doppelte Arbeit zu vermeiden, können wir Memos verwenden, um eine Funktion auszuführen und das Ergebnis zu speichern, bis sich deren Abhängigkeiten ändern. Das ist nützlich, um Berechnungen für Effekte zu speichern, die zusätzliche Abhängigkeiten haben und den Aufwand für aufwendige Operationen auszugleichen wie DOM-Node-Erstellung."
    }), "\n", jsx(_components.p, {
      children: "Memos sind gleichzeitig Beobachter wie ein Effekt und ein nur lesbares Signal. Da sie sowohl ihre Abhängigkeiten als auch ihre Beobachter reaktiv verfolgen, können sie sicherstellen, dass sie nur einmal für eine Änderung laufen. Das macht sie bevorzugt gegenüber Effekten, die in Signale schreiben. Generell sollte, was abgeleitet werden kann, auch abgeleitet werden."
    }), "\n", jsxs(_components.p, {
      children: ["Ein Memo zu erstellen ist so einfach wie eine Funktion an ", jsx(_components.code, {
        children: "createMemo"
      }), " zu übergeben; das man aus ", jsx(_components.code, {
        children: "solid-js"
      }), " importieren kann. In diesem Beispiel, wird die Neuberechnung des Werts mit jedem Klick immer aufwendiger. Wenn wir sie in ", jsx(_components.code, {
        children: "createMemo"
      }), " schachteln, muss nur einmal pro Klick neu berechnet werden:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fib = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fibonacci"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Schreibe ein ", jsx(_components.code, {
        children: "console.log"
      }), " in die ", jsx(_components.code, {
        children: "fib"
      }), "-Funktion, um zu sehen, wie oft sie aufgerufen wird:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fib = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", 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: "\"Calculating Fibonacci\""
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fibonacci"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "());\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=lesson-4315a5c5.js.map
