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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Rendering",
  "children": [{
    "depth": 2,
    "value": "JSX kompilieren",
    "children": []
  }, {
    "depth": 2,
    "value": "Attribute und Props",
    "children": []
  }, {
    "depth": 2,
    "value": "Einstieg",
    "children": []
  }, {
    "depth": 2,
    "value": "Komponenten",
    "children": []
  }, {
    "depth": 2,
    "value": "Props",
    "children": []
  }, {
    "depth": 2,
    "value": "Children",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    code: "code",
    pre: "pre",
    span: "span",
    blockquote: "blockquote",
    strong: "strong",
    em: "em"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rendering",
        children: "#"
      }), "Rendering"]
    }), "\n", jsx(_components.p, {
      children: "Solid unterstützt Templating in 3 Formen: JSX, Tagged Template Literals und Solids HyperScript-Variante, obwohl JSX die bevorzugte Form ist. Warum? JSX ist eine großartige DSL für Kompilation. Es hat eine klare Syntax, unterstützt TypeScript, läuft mit Babel und unterstützt andere Werkzeuge wie Syntax Highlighting und Prettier. Es war nur pragmatisch, ein Werkzeug zu verwenden, das einem all das kostenlos zur Verfügung stellt. Als kompilierte Lösung bietet es eine großartige Entwicklererfahrung. Warum soll man sich mit eigenen Syntax DSLs herumschlagen, wenn man eine verwenden kann, die so weitläufig unterstützt wird?"
    }), "\n", jsxs(_components.h2, {
      id: "jsx-kompilieren",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#jsx-kompilieren",
        children: "#"
      }), "JSX kompilieren"]
    }), "\n", jsx(_components.p, {
      children: "Rendering beinhaltet das Vorkompilieren von JSX-Templates zu optimiertem nativen JS-Code. Der JSX-Code erzeugt:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "DOM Templates, die bei der Erstellung der Instanz geklont werden"
      }), "\n", jsx(_components.li, {
        children: "Eine Reihe von Referenzdeklarationen die nur firstChild und nextSibling verwenden"
      }), "\n", jsx(_components.li, {
        children: "Feingranulare Berechnungen, um die so erzeugten Elemente zu aktualisieren."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Diese Herangehensweise ist einerseits performanter und erzeugt andererseits auch weniger Code als jedes Element einzeln eins nach dem anderen mit document.createElement zu erzeugen."
    }), "\n", jsxs(_components.h2, {
      id: "attribute-und-props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#attribute-und-props",
        children: "#"
      }), "Attribute und Props"]
    }), "\n", jsx(_components.p, {
      children: "Solid versucht, die HTML-Konventionen so weit wie möglich beizubehalten, einschließlich der wahlweisen Groß-/Kleinschreibung der Attribute."
    }), "\n", jsxs(_components.p, {
      children: ["Die Mehrzahl aller Attribute von nativen JSX-Elementen werden als DOM-Attribute gesetzt. Statische Werte werden direkt in das geklonte Template geschrieben. Es gibt eine Reihe von Ausnahmen wie ", jsx(_components.code, {
        children: "class"
      }), ", ", jsx(_components.code, {
        children: "style"
      }), ", ", jsx(_components.code, {
        children: "value"
      }), ", ", jsx(_components.code, {
        children: "innerHTML"
      }), ", die zusätzliche Funktionalität bereitstellen."]
    }), "\n", jsxs(_components.p, {
      children: ["However, custom elements (with exception of native built-ins) default to properties when dynamic. This is to handle more complex data types. It does this conversion by camel casing standard snake case attribute names ", jsx(_components.code, {
        children: "some-attr"
      }), " to ", jsx(_components.code, {
        children: "someAttr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Jedenfalls ist es möglich, dieses Verhalten direkt mit Namespace-Direktiven zu kontrollieren. Man kann die Behandlung als Attribut mit ", jsx(_components.code, {
        children: "attr:"
      }), " erzwingen oder als Prop mit ", jsx(_components.code, {
        children: "prop:"
      })]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<my-element ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "UniqACC"
        }), "={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "attr"
        }), ":title={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "title"
        }), "} />\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Hinweis:"
        }), " Statische Attribute werden als Teil vom HTML-Template erzeugt, das geklont wird. Evaluierte Werte, ob fest oder dynamisch, werden nachträglich in der JSX-Bindungsreihenfolge hinzugefügt. Während das für manche DOM-Elemente in Ordnung ist, gibt es manche, wie ", jsx(_components.code, {
          children: "input type=\"range\""
        }), ", wo die Reihenfolge wichtig ist. Daran sollte man denken, wenn man Elemente bindet."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "einstieg",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#einstieg",
        children: "#"
      }), "Einstieg"]
    }), "\n", jsxs(_components.p, {
      children: ["Der einfachste Weg, Solid-Komponenten einzubinden, besteht darin, render von 'solid-js/web' einzubinden. ", jsx(_components.code, {
        children: "render"
      }), " nimmt eine Funktion als ersten Parameter und den Container, in den eingehängt werden soll, als zweiten und gibt eine Entfernungs-Methode zurück. Dieses ", jsx(_components.code, {
        children: "render"
      }), " erzeugt automatisch den Reaktiven Ausgangspunkt und übernimmt das Rendern in den Container. Für die beste Performance wähle man dafür ein Element ohne Children."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { render } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js/web\""
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"main\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Wichtig"
        }), " Der Erste Parameter muss eine Funktion sein. Andernfalls können wir das reaktive System nicht komplett verfolgen und planen. Diese einfache Auslassung wird dazu führen, dass Effekte nicht laufen."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "komponenten",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#komponenten",
        children: "#"
      }), "Komponenten"]
    }), "\n", jsx(_components.p, {
      children: "Komponenten sind in Solid einfach Pascal-case-benannte (am Anfang großgeschrieben) Funktionen. Ihr erster Parameter ist ein props-Objekt und sie geben echte DOM-Nodes aus."
    }), "\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: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello\""
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\r\n);\r\n\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    {props.children}\r\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\r\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Da alle JSX-Nodes echte DOM-Nodes sind, ist die einzige Aufgabe der obersten Komponente, diese alle ins DOM einzuhängen."
    }), "\n", jsxs(_components.h2, {
      id: "props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#props",
        children: "#"
      }), "Props"]
    }), "\n", jsxs(_components.p, {
      children: ["Ähnlich wie bei React, Vue, Angular und anderen Frameworks erlaubt es Solid einem, Props in den Komponenten zu definieren, um Daten an Kind-Komponenten zu übergeben. Hier gibt ein Parent den String \"Hello\" an die ", jsx(_components.code, {
        children: "Label"
      }), "-Komponente mit dem ", jsx(_components.code, {
        children: "greeting"
      }), "-Prop weiter."]
    }), "\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: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello\""
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\r\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Im obigen Beispiel ist der Wert, der in ", jsx(_components.code, {
        children: "greeting"
      }), " gesetzt wird, statisch, aber man kann auch dynamische Werte setzen. Zum Beispiel:"]
    }), "\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: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [greeting, setGreeting] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello\""
        }), ");\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\r\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{greeting()}"
            }), ">"]
          }), "\r\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\r\n  );\r\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Komponenten können auf props über das ", jsx(_components.code, {
        children: "props"
      }), "-Argument zugreifen."]
    }), "\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: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    {props.children}\r\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\r\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Anders als in anderen Frameworks kann man auf das ", jsx(_components.code, {
        children: "props"
      }), "-Objekt einer Komponente nicht mit destructuring zugreifen. Das liegt daran, dass das ", jsx(_components.code, {
        children: "props"
      }), "-Objekt hinter den Kulissen Getter und Setter benutzt, um verzögert auf Werte zuzugreifen. Destrukturierung zerstört dabei die Reaktivität von ", jsx(_components.code, {
        children: "props"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "Dieses Beispiel zeigt den \"korrekten\" Weg, auf Props in Solid zuzugreifen:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Hier wird `props.name` so aktualisiert, wie man es erwartet"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Dieses Beispiel zeigt den falschen Weg, auf Props in Solid zuzugreifen:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Das ist schlecht;"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Hier wird `props.name` nicht aktualisiert (bzw. ist nicht reaktiv), da es in `name` destrukturiert wird"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "{ name }"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Während das props-Objekt wie ein normales Objekt aussieht, während man es verwendet (und TypeScript-Nutzern wird auffallen, dass es wie ein normales Objekt typisiert ist), ist es tatsächlich reaktiv – etwa vergleichbar mit einem Signal. Das hat ein paar Auswirkungen."
    }), "\n", jsx(_components.p, {
      children: "Da Solids Funktions-Komponenten anders als bei anderen JSX-Frameworks nur einmal ausgeführt werden (statt jeden Render-Zyklus), wird das folgende Beispiel nicht funktionieren, wie man es erwarten würde."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\r\n\r\n  ", 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"
            }), ">"]
          }), "{value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\r\n\r\n", 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: "Form"
        }), "(", jsx(_components.span, {
          className: "hljs-params"
        }), ") {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [value, setValue] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ");\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\r\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "BasicComponent"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "value"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{value()}"
            }), " />"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "type"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"text\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "oninput"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{(e)"
            }), " =>"]
          }), " setValue(e.currentTarget.value)} />\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\r\n  );\r\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["In diesem Beispiel ist vermutlich beabsichtigt, dass die ", jsx(_components.code, {
        children: "BasicComponent"
      }), " den gegenwärtigen Wert anzuzeigen, der in das ", jsx(_components.code, {
        children: "input"
      }), "-Feld geschrieben wurde. Aber, man erinnere sich, die ", jsx(_components.code, {
        children: "BasicComponent"
      }), " wird nur ein einziges Mal aufgerufen, wenn sie erzeugt wird. Zu dieser Zeit ist ", jsx(_components.code, {
        children: "props.value"
      }), " gleich ", jsx(_components.code, {
        children: "''"
      }), ". Das heißt, dass ", jsx(_components.code, {
        children: "const value"
      }), " in ", jsx(_components.code, {
        children: "BasicComponent"
      }), " immer ", jsx(_components.code, {
        children: "default"
      }), " enthalten und nie aktualisiert wird. Während das ", jsx(_components.code, {
        children: "props"
      }), "-Objekt reaktiv ist, ist der Zugriff auf sie in ", jsx(_components.code, {
        children: "const value = props.value || 'default';"
      }), " außerhalb des überwachten Bereichs von Solid und wird daher nicht neu ausgeführt, wenn props sich ändern."]
    }), "\n", jsx(_components.p, {
      children: "Wie können wir unser Problem beheben?"
    }), "\n", jsxs(_components.p, {
      children: ["Nun, generell müssen wir auf ", jsx(_components.code, {
        children: "props"
      }), " so zugreifen, dass Solid es verfolgen kann. Generell heisst das, innerhalb vom JSX oder innerhalb von ", jsx(_components.code, {
        children: "createMemo"
      }), ", ", jsx(_components.code, {
        children: "createEffekt"
      }), " oder thunk(", jsx(_components.code, {
        children: "() => ..."
      }), "). Hier ist eine Lösung die wie erwartet funktioniert:"]
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", 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"
            }), ">"]
          }), "{props.value || \"default\"}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Das kann äquivalent in eine Funktion ausgelagert werden:"
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "value"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\r\n\r\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Eine andere Option für besonders aufwendige Berechnungen ist die Nutzung von ", jsx(_components.code, {
        children: "createMemo"
      }), ". Zum Beispiel:"]
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\r\n\r\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Oder einen Helfer benutzen:"
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  props = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), " }, props);\r\n\r\n  ", 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"
            }), ">"]
          }), "{props.value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Zur Erinnerung, die folgenden Beispiele funktionieren ", jsx(_components.em, {
        children: "nicht"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// schlecht"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": valueProp } = props;\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\r\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// schlecht"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valueProp = prop.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ";\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\r\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Solids Komponenten machen einen wesentlichen Teil von dessen Performance aus. Solids Herangehensweise, Komponenten \"verschwinden\" zu lassen wird durch verzögerte Prop-Berechnung möglich. Statt sofort alle Prop-Ausdrücke zu berechnen und die Werte weiterzugeben, wird die Ausführung verzögert, bis auf die Prop im Kind-Element zugegriffen wird. Damit wird die Ausführung bis zum letzten möglichen Moment verzögert, typischerweise direkt bei den DOM-Einbindungen, was die Performance maximiert. Das sorgt für flache Hierarchien und entfernt die Notwendigkeit, einen Komponenten-Baum zu behandeln."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " prop1=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"static\""
        }), " prop2={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), "} />;\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// kompiliert ungefähr zu:"
        }), "\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Wir untracken das Compoonent-Objekt, um es zu isolieren und kostspielige Updates zu vermeiden"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "untrack"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\r\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "({\r\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop1"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"static\""
        }), ",\r\n    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// ein dynamischer Ausdruck wird in einem Getter verschachtelt"
        }), "\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "prop2"
        }), "() {\r\n      ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), ";\r\n    },\r\n  })\r\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Um Reaktivität beizubehalten, hat Solid ein paar Prop-Helfer:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Default-Props"
        }), "\r\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Smith\""
        }), " }, props);\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Props klonen"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " newProps = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props);\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Props zusammenführen"
        }), "\r\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props, otherProps);\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Props in verschiedene Objekte aufspalten"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [local, others] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "splitProps"
        }), "(props, [", jsx(_components.span, {
          className: "hljs-string",
          children: "\"className\""
        }), "])\r\n<div {...others} className={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "cx"
        }), "(local.", jsx(_components.span, {
          className: "hljs-property",
          children: "className"
        }), ", theme.", jsx(_components.span, {
          className: "hljs-property",
          children: "component"
        }), ")} />\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "children",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#children",
        children: "#"
      }), "Children"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid behandelt JSX-Children ähnlich wie React. Ein einzelnes Kind-Element ist ein einzelner Wert in ", jsx(_components.code, {
        children: "props.children"
      }), " und mehrere Kind-Elemente wird als Array von Werten behandelt. Normalerweise werden sie im JSX durchgereicht. Allerdings gibt es für den Fall, dass man mit ihnen interagieren möchte, den ", jsx(_components.code, {
        children: "children"
      }), "-Helfer, der alle Kontrollflüsse auflöst und ein Memo zurückgibt."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Einzelnes Kind-Element"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "class"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"label\""
            }), ">"]
          }), "Hi, { props.children }", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\r\n\r\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), "Josie", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          })]
        }), "\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Mehrere Kind-Elemente"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.children}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n\r\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "First", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n  {state.expression}\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "Judith", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          })]
        }), "\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Kind-Elemente mappen"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.children}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\r\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Kind-Elemente mit Helfer modifizieren und mappen"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// children-Helfer macht ein Memo aus dem Wert und löst die reaktiven Zwischenschritte auf"
        }), "\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " memo = ", 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"
        }), ");\r\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " children = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "memo"
        }), "();\r\n    children.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "forEach"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "c"
          }), ") =>"]
        }), " c.", jsx(_components.span, {
          className: "hljs-property",
          children: "classList"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"list-child\""
        }), "))\r\n  })\r\n  ", 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: "ul"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{memo()}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "Wichtig:"
      }), " Solid behandelt Kind-Tags als kostspielige Ausdrücke und verpackt sie auf dem gleichen Weg als dynamische reaktive Ausdrücke. Das bedeutet, dass sie verzögert auf ", jsx(_components.code, {
        children: "props"
      }), "-Zugriff diesen berechnen. Man sei vorsichtig, auf diese mehrfach zuzugreifen oder zu destrukturieren, bevor sie im JSX verwendet werden. Das liegt daran, dass sich Solid nicht den Luxus gönnt, vorher virtuelle DOM-Nodes zu erstellen und diese abzugleichen, also muss die Berechnung der ", jsx(_components.code, {
        children: "props"
      }), " verzögert und auf absichtlichen Zugriff erfolgen. Nutze den ", jsx(_components.code, {
        children: "children"
      }), "-Helfer, wenn diese memoized werden sollen."]
    })]
  });
}
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=rendering-7c4d0bbc.js.map
