{"id":50042,"date":"2022-05-10T08:04:30","date_gmt":"2022-05-10T07:04:30","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=50042&preview=true&preview_id=50042"},"modified":"2023-08-28T10:52:56","modified_gmt":"2023-08-28T09:52:56","slug":"usecallback-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/usecallback-react\/","title":{"rendered":"Den useCallback-Hook von React z\u00e4hmen lernen"},"content":{"rendered":"

Es ist kein Geheimnis, dass React.js in den letzten Jahren sehr popul\u00e4r geworden<\/a> ist. Es ist jetzt die JavaScript-Bibliothek der Wahl<\/a> f\u00fcr viele der bekanntesten Akteure im Internet, darunter Facebook und WhatsApp.<\/p>\n

Einer der Hauptgr\u00fcnde f\u00fcr ihren Aufstieg war die Einf\u00fchrung von Hooks in Version 16.8<\/a>. Mit React Hooks kannst du die Funktionalit\u00e4t von React nutzen, ohne Klassenkomponenten zu schreiben. Jetzt sind funktionale Komponenten mit Hooks die bevorzugte Struktur f\u00fcr Entwickler, die mit React arbeiten.<\/p>\n

In diesem Blogbeitrag werden wir einen bestimmten Hook – useCallback<\/code> – genauer unter die Lupe nehmen, denn er ber\u00fchrt einen grundlegenden Teil der funktionalen Programmierung, die so genannte Memoisierung. Du wirst genau erfahren, wie und wann du den useCallback<\/code> Hook nutzen kannst, um das Beste aus seinen leistungssteigernden F\u00e4higkeiten zu machen.<\/p>\n

Bist du bereit? Dann lass uns loslegen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist Memoisierung?<\/h2>\n

Memoisierung bedeutet, dass eine komplexe Funktion ihre Ausgabe speichert, damit sie beim n\u00e4chsten Aufruf mit derselben Eingabe wieder zur Verf\u00fcgung steht. Es ist \u00e4hnlich wie das Caching<\/a>, aber auf einer lokaleren Ebene. So k\u00f6nnen komplexe Berechnungen \u00fcbersprungen werden und die Ausgabe wird schneller zur\u00fcckgegeben, da sie bereits berechnet wurde.<\/p>\n

Das kann sich erheblich auf die Speicherzuweisung und die Leistung auswirken, und genau diese Belastung soll der useCallback<\/code> Hook lindern.<\/p>\n

Reacts useCallback vs. useMemo<\/h3>\n

An dieser Stelle ist es erw\u00e4hnenswert, dass useCallback<\/code> gut mit einem anderen Hook namens useMemo<\/code> zusammenarbeitet. Wir werden beide er\u00f6rtern, aber in diesem Beitrag konzentrieren wir uns auf useCallback<\/code> als Hauptthema.<\/p>\n

Der wichtigste Unterschied ist, dass useMemo<\/code> einen memoisierten Wert zur\u00fcckgibt, w\u00e4hrend useCallback<\/code> eine memoisierte Funktion zur\u00fcckgibt. Das bedeutet, dass useMemo<\/code> zum Speichern eines berechneten Wertes verwendet wird, w\u00e4hrend useCallback<\/code> eine Funktion zur\u00fcckgibt, die du sp\u00e4ter aufrufen kannst.<\/p>\n

Diese Hooks geben eine zwischengespeicherte Version zur\u00fcck, es sei denn, eine ihrer Abh\u00e4ngigkeiten (z. B. State oder Props) \u00e4ndert sich.<\/p>\n

Schauen wir uns die beiden Funktionen einmal in Aktion an:<\/p>\n

import { useMemo, useCallback } from 'react'\nconst values = [3, 9, 6, 4, 2, 1]\n\n\/\/ This will always return the same value, a sorted array. Once the values array changes then this will recompute.\nconst memoizedValue = useMemo(() => values.sort(), [values])\n\n\/\/ This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.\nconst memoizedFunction = useCallback(() => values.sort(), [values])<\/code><\/pre>\n
Der obige Codeschnipsel ist ein erfundenes Beispiel, zeigt aber den Unterschied zwischen den beiden R\u00fcckrufen:<\/p>\n
    \n
  1. memoizedValue<\/code> wird zu dem Array [1, 2, 3, 4, 6, 9]<\/code>. Solange die Wertevariable bestehen bleibt, bleibt auch memoizedValue<\/code> bestehen und wird nie wieder neu berechnet.<\/li>\n
  2. memoizedFunction<\/code> wird eine Funktion sein, die das Array [1, 2, 3, 4, 6, 9]<\/code> zur\u00fcckgibt.<\/li>\n<\/ol>\n
    Das Tolle an diesen beiden Callbacks ist, dass sie zwischengespeichert werden und so lange bleiben, bis sich das Abh\u00e4ngigkeitsarray \u00e4ndert. Das bedeutet, dass sie bei einem Rendering nicht in den M\u00fcll geworfen werden.<\/p>\n\n
    Rendering und React<\/h2>\n
    Warum ist die Memoisierung bei React so wichtig?<\/p>\n
    Es hat damit zu tun, wie React deine Komponenten rendert. React nutzt ein virtuelles DOM, das im Speicher gespeichert ist, um Daten zu vergleichen und zu entscheiden, was aktualisiert werden soll.<\/p>\n
    Das virtuelle DOM unterst\u00fctzt React bei der Leistung und h\u00e4lt deine Anwendung schnell. Wenn sich ein Wert in deiner Komponente \u00e4ndert, wird normalerweise die gesamte Komponente neu gerendert. Dass macht\u00a0 React „reactive“ auf Benutzereingaben und l\u00e4sst den Bildschirm aktualisieren, ohne die Seite neu zu laden.<\/p>\n
    Du willst deine Komponente nicht neu rendern, weil sich \u00c4nderungen nicht auf die Komponente auswirken werden. Hier erweist sich die Memoisierung durch useCallback<\/code> und useMemo<\/code> als n\u00fctzlich<\/p>\n
    Wenn React deine Komponente neu rendert, werden auch die Funktionen, die du in deiner Komponente deklariert hast, neu erstellt.<\/p>\n
    Beachte, dass der Vergleich der Gleichheit einer Funktion mit einer anderen Funktion immer falsch sein wird. Da eine Funktion auch ein Objekt ist, kann sie nur sich selbst gleich sein:<\/p>\n
    \/\/ these variables contain the exact same function but they are not equal\nconst hello = () => console.log('Hello Matt')\nconst hello2 = () => console.log('Hello Matt')\n\nhello === hello2 \/\/ false\nhello === hello \/\/ true<\/code><\/pre>\n
    Mit anderen Worten: Wenn React deine Komponente neu rendert, werden alle Funktionen, die in deiner Komponente deklariert sind, als neue Funktionen angesehen.<\/p>\n
    Das ist in den meisten F\u00e4llen in Ordnung, denn einfache Funktionen sind leicht zu berechnen und beeintr\u00e4chtigen die Leistung nicht. Aber wenn du nicht m\u00f6chtest, dass die Funktion als neue Funktion angesehen wird, kannst du auf useCallback<\/code> zur\u00fcckgreifen.<\/p>\n
    Du fragst dich vielleicht: „Wann sollte ich nicht wollen, dass eine Funktion als neue Funktion erkannt wird?“ Nun, es gibt bestimmte F\u00e4lle, in denen useCallback<\/code> sinnvoller ist:<\/p>\n
      \n
    1. Du \u00fcbergibst die Funktion an eine andere Komponente, die ebenfalls memoisiert ist (useMemo<\/code>)<\/li>\n
    2. Deine Funktion hat einen internen Status, den sie sich merken muss<\/li>\n
    3. Deine Funktion ist von einem anderen Hook abh\u00e4ngig, wie zum Beispiel useEffect<\/code><\/li>\n<\/ol>\n
      Leistungsvorteile von React useCallback<\/h2>\n
      Wenn useCallback<\/code> richtig eingesetzt wird, kann es dazu beitragen, deine Anwendung zu beschleunigen und zu verhindern, dass Komponenten neu gerendert werden, wenn sie es nicht m\u00fcssen.<\/p>\n
      Nehmen wir an, du hast eine Komponente, die eine gro\u00dfe Menge an Daten abruft und daf\u00fcr verantwortlich ist, diese Daten in Form eines Diagramms oder einer Grafik<\/a> darzustellen, etwa so:<\/p>\n
      \n
      \"Ein
      Balkendiagramm, das mit einer React-Komponente erstellt wurde.<\/figcaption><\/figure><\/figure>\n
      Angenommen, die \u00fcbergeordnete Komponente f\u00fcr die Komponente deiner Datenvisualisierung wird neu erstellt, aber die ge\u00e4nderten props oder der state wirken sich nicht auf diese Komponente aus. In diesem Fall willst oder musst du die Komponente wahrscheinlich nicht neu rendern und alle Daten neu abrufen. Wenn du dieses erneute Rendern und Abrufen vermeidest, sparst du die Bandbreite deines Nutzers und sorgst f\u00fcr ein reibungsloseres Nutzererlebnis.<\/p>\n
      Nachteile von React useCallback<\/h2>\n
      Obwohl dieser Hook die Leistung verbessern kann, hat er auch seine T\u00fccken. Einige Dinge, die du vor der Verwendung von useCallback<\/code> (und useMemo<\/code>) beachten solltest, sind:<\/p>\n