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: "Eine der Gründe für feingranulare Reaktivität in Solid ist die Fähigkeit, Aktualisierungen unabhängig voneinander zu behandeln. Man kann eine Liste von Nutzern haben und wenn ein Name geändert wird, aktualisieren wir nur eine einzige Stelle im DOM, ohne die Liste selbst abzugleichen. Wenige (selbst reaktive) UI-Frameworks können das tun."
    }), "\n", jsxs(_components.p, {
      children: ["Aber wie schaffen wir das? In dem Beispiel haben wir eine Liste von Aufgaben in einem Signal. Um eine Aufgabe als abgeschlossen zu markieren, müssten wir diese mit einem Klon ersetzen. Das ist die Herangehensweise der meisten Frameworks, aber es ist verschwenderisch, wenn wir wieder und wieder die Liste abgleichen und erstellen die DOM-Elemente neu, wie es das ", jsx(_components.code, {
        children: "console.log"
      }), " sichtbar macht."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "(\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "map"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "todo"
          }), ") =>"]
        }), " (todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " !== id ? todo : { ...todo, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "completed"
        }), ": !todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "completed"
        }), " })),\n  );\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Stattdessen initialisiert man in einer feingranularen Library wie Solid die Daten mit verschachtelten Signalen, etwa so:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "text"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [completed, setCompleted] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "([...", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "(), { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "id"
        }), ": ++todoId, text, completed, setCompleted }]);\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Jetzt können wir den Erledigungszustand aktualisieren, indem wir ", jsx(_components.code, {
        children: "setCompleted"
      }), " aufrufen, ohne dass ein zusätzlicher Abgleich nötig wäre. Das liegt daran, dass wir die Komplexität in die Daten statt in die Darstellung verschoben haben. Und wir wissen genau, wie sich die Daten ändern."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " index = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "findIndex"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "t"
          }), ") =>"]
        }), " t.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " === id);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " todo = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "()[index];\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (todo) todo.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCompleted"
        }), "(!todo.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "completed"
        }), "())\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Wenn man nun die restlichen Referenzen zu ", jsx(_components.code, {
        children: "todo.completed"
      }), " in ", jsx(_components.code, {
        children: "todo.completed()"
      }), " ändert, sollte das Beispiel nur noch ", jsx(_components.code, {
        children: "console.log"
      }), " aufrufen, wenn der Eintrag erzeugt wird und nicht, wenn man die Erledigung umschaltet."]
    }), "\n", jsx(_components.p, {
      children: "Das erfordert natürlich etwas manuelles Abbilden und es war einmal in der Vergangenheit die einzige Möglichkeit. Aber jetzt, dank Proxies, können wir die meiste Arbeit im Hintergrund machen, ohne manuelle Einmischung. Gehe weiter zur nächsten Anleitung, um zu sehen, wie."
    })]
  });
}
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-8e139392.js.map
