Tag 18: JavaScript, Custom Hooks
Um innerhalb von JSX {"Ich bin ein String in JSX"} Strings zu verketten, kann auf Template Strings zurückgegriffen werden. Anstatt Strings und Variablen durch ein "+" zu verbinden, kann der String in Backticks (`) geschrieben werden. An der Stelle, an der auf die Variable verwiesen wird, wird mit '${variablenName}' auf diese zugegriffen.
Weiterführende Infos:
Spreading ist eine Funktionalität, welche es ermöglicht die Eigenschaften eines Objektes, schnell und einfach an ein anderes Objekt zu übertragen. Hierzu werden vor dem Objektname drei Punkte geschrieben:
...variablenName
Vereinfacht das übertragen aller Elemente einer Quell-Liste an eine neue Ziel-Liste.
const quelle = [1, 2, 3]
const ziel = [...quelle]
Zusätzlich können neue Elemente - durch ein Komma separiert - hinzugefügt werden:
const quelle = [1, 2, 3]
const ziel = [...quelle, 4, 5]
Bsp.: Eine Namens-Liste wird kopiert und um einen weiteren Namen erweitert
Vereinfacht das Übertragen von Attribut-Werten eines Quell-Objekts an ein Ziel-Objekt.
const quelle = {attributA: "Wert A", attributB: "Wert B"}
const ziel = {...quelle}
Anders als bei Listen kann kein neues Attribut hinzugefügt werden. Werden vorhandene Attribute - durch ein Komma separiert - verwendet, wird der Attribut-Wert geändert.
const quelle = {attributA: "Wert A", attributB: "Wert B"}
const ziel = {...quelle, attributB: "Neuer Wert"}
Bsp.: Eine Person wird kopiert und das Attribut Job wird geändert
Es kann auf zwei Arten auf die Eigenschaften eines Objektes zugegriffen werden. Die Punktnotation 'objektName.AttributName' oder durch ein Names-Literal objektName["AttributName"].
Bsp.: Zugriff auf dasselbe Attribut durch verschiedene Möglichkeiten
React Hooks bieten die Möglichkeit, State und andere React-Funktionen in Functional Components zu nutzen, was bisher nur in Class Components möglich war. Wir können eigene Hooks erstellen. Sie stellen eine tolle Möglichkeit dar, Logik wiederverwendbar zu machen. Best Practive ist, dass die Custom Hooks ebenso wie die Standard Hooks mit dem Keyword "use" beginnen.
Bsp Todo:
Unsere App.tsx ist sehr lang. Wir können einen Teil des Codes auslagern, da die Funktionen nichts konkretes mit der App.tsx zutun haben. Wir erstellen unseren Custom Hook.
Wir erstellen also eine ts (tsx ist auch in Ordnung) Datei und lagern den Code dort aus. Wir erstellen eine neue Funktion in der Datei, nennen die Datei in dem Fall useTodos.ts, als auch die Funktion useTodos() und müssen den return anpassen, in dem wir ein Objekt erstellen und alle Werte da reintun, die wir brauchen :
Jetzt müssen wir die App.Tsx anpassen, damit wir den Custom Hook auch benutzen können und die Funktion aufrufen können. Wir benutzen dafür den Namen der Funktion und speichern dieses in eine Variable und bauen das Objekt in seine einzelnen Eigenschaften aus ( nennt man Destructuring), sodass wir direkt auf die einzelnen Bestandteile des Objekts zugreifen können statt "Objekt.Eigenschaft".
https://www.geeksforgeeks.org/destructuring-of-props-in-reactjs/ oder https://www.w3schools.com/react/react_es6_destructuring.asp