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",
    pre: "pre",
    code: "code",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Ein Teil davon, was Solid so performant macht, ist, dass unsere Komponenten grundsätzlich nur Funktionsaufrufe sind. Die Art, wie wir Aktualisierungen verteilen ist, dass der Compiler potentiell reaktive Ausdrücke in Objekt-Getter steckt. Man kann sich die Compiler-Ausgabe so vorstellen:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// dieses JSX"
        }), "\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComp"
        }), " dynamic={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}>\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Child"
            }), " />"]
          })
        }), "\n</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComp"
        }), ">\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// wird zu"
        }), "\n", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComp"
        }), "({\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dynamic"
        }), "() { ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "() },\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "() { ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Child"
        }), "() }\n});\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Das heisst, dass diese Props verzögert evaluiert werden können. Mit dem Zugriff wird solange gewartet, bis sie tatsächlich verwendet werden. Das behält die Reaktivität bei, ohne dass fremde Filter oder Synchronisierungen eingeführt werden müssen. Allerdings bedeutet das, dass wiederholter Zugriff dazu führen kann, dass Kind-Komponenten oder -Elemente neu erzeugt werden."
    }), "\n", jsx(_components.p, {
      children: "Die meiste Zeit über wirst Du nur Props ins JSX einfügen, so dass sich daraus kein Problem ergibt. Wenn man allerdings mit Kind-Elementen arbeitet, muss man vorsichtig sein, diese nicht mehrmals zu erzeugen."
    }), "\n", jsxs(_components.p, {
      children: ["Aus diesem Grund hat Solid den ", jsx(_components.code, {
        children: "children"
      }), "-Helfer. Diese Methode erzeugt ein Memo um das ", jsx(_components.code, {
        children: "children"
      }), "-Prop und löst die reaktiven Referenzen der Kinder auf, so dass man direkt mit Ihnen interagieren kann."]
    }), "\n", jsxs(_components.p, {
      children: ["In diesem Beispiel haben wir eine dynamische Liste und wollen in jedes Kind-Element die ", jsx(_components.code, {
        children: "color"
      }), "-Style-Eigenschaft setzen. Wenn wir direkt mit ", jsx(_components.code, {
        children: "props.children"
      }), " interagieren, würden wir nicht nur die Nodes mehrmals erstellen, sondern könnten auch in ", jsx(_components.code, {
        children: "props.children"
      }), " eine Funktion finden, das Memo, das von ", jsx(_components.code, {
        children: "<For>"
      }), " zurückgegeben wird."]
    }), "\n", jsxs(_components.p, {
      children: ["Lass uns stattdessen den ", jsx(_components.code, {
        children: "children"
      }), "-Helfer innerhalb ", jsx(_components.code, {
        children: "colored-list.tsx"
      }), " verwenden:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ColoredList"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " c = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "children"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "{c()}", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Um unsere Elemente zu aktualisieren, benutzen wir einen Effekt:"
    }), "\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: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "c"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "forEach"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: [jsx(_components.span, {
            className: "hljs-params",
            children: "item"
          }), " =>"]
        }), " item.", jsx(_components.span, {
          className: "hljs-property",
          children: "style"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "color"
        }), " = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "color"
        }), "));\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-a066f174.js.map
