Einstieg

Wenn Sie in Ihrer lokalen IDE mitverfolgen möchten, finden Sie das GitHub-Repo hier .

• clone
• cd client
• npm i
• npm start

Referentielle Gleichheit ist ein grundlegendes Konzept sowohl in JavaScript als auch in der Informatik insgesamt. Beginnen wir also mit einer Demonstration in Aktion.

Ich habe Screenshots in den gesamten Artikel eingebettet, um die Verwendung auf Mobilgeräten zu vereinfachen. Wenn Sie sich auf dem Desktop befinden und es geklont haben, führen Sie es aus, referentialEquality.jsum die Ausgabe zu beobachten, oder spielen Sie einfach mit dem unten eingebetteten JSFiddle-Snippet.

Bei der Auswertung, ob integer 1genau gleich dem ist integer 1, gibt die Konsole aus true. Das liegt daran, dass, nun ja, das strikt gleich dem integer 1 istinteger 1 .

Wir sehen das gleiche Ergebnis, wenn wir zwei Strings auswerten.

Offensichtlich wird dies bei zwei primitiven Datentypen mit demselben Wert immer der Fall sein.

Was ist nun mit Datenstrukturen? Zum Beispiel zwei Objektliterale mit denselben Schlüssel/Wert-Paaren? Was ist mit leeren Objektliteralen?

Warum sollte das gedruckt werden false? Beim Vergleich, ob diese beiden Objektliterale absolut gleich sind, verwendet JavaScript ihre jeweiligen Speicheradressen .

Mit anderen Worten, diese beiden Objekte können dieselben Werte enthalten , aber sie verweisen nicht auf dasselbe Objekt . Sie sehen gleich aus, nehmen aber im Gedächtnis zwei verschiedene Plätze ein .

Dasselbe gilt, ob Sie zwei Objektliterale, zwei Array-Literale oder zwei Funktionen vergleichen!

Um dies weiter zu demonstrieren, werden wir eine Funktion definieren func, die eine anonyme Funktion zurückgibt, die wiederum etwas anderes zurückgibt ( wie ein JSX-Element ).

Wir werden dann zwei verschiedene Funktionen firstRenderund secondRendergleich dem von zurückgegebenen Wert zuweisen func.

Stellen Sie sich das funcals Ihre React-Funktionskomponente vor, während beim ersten Rendern firstRendereine Funktion darin und beim zweiten Rendern secondRendereine Funktion darin enthalten ist.

Obwohl firstRenderund secondRenderdenselben Wert zurückgeben und von derselben Definition zugewiesen werden, haben sie keine referenzielle Gleichheit . Infolgedessen definiert die Komponente diese Funktion jedes Mal neu, wenn sie rendert.

Leider ist es in JavaScript nicht einfach, diese Speicheradressen wie in Python auszugeben, aber für eine etwas tiefergehende Erklärung von Referenz vs. Wert werfen Sie einen Blick auf diesen Artikel von freeCodeCamp.

Dieses Thema kann komplex werden, und Sie müssen heute Abend keine Klasse darüber unterrichten. Denken Sie also vorerst daran:

• primitiver Datentyp ===primitiver Datentyp
• Datenstruktur !==Datenstruktur.

Startercode

Nachdem wir unsere App hochgefahren haben, öffnen Sie die BookDetails.jsxKomponente und speichern Sie sie erneut. Das erste, was wir in unserem React-Dev-Server bemerken, ist eine Gemeinsamkeit WARNING, die junge Entwickler tendenziell ignorieren. Wenn Sie die Belegschaft erreichen und anfangen, Code für die Produktion zu schreiben, werden Ihre Linters noch strenger sein als das, was in create-react-app. WARNINGSwenden sich an ERRORS, und einige Linters erlauben Ihnen nicht, zu pushen, bevor Sie diese ansprechen ERRORS.

Also, anstatt es zu ignorieren, lassen Sie uns herausfinden, wie wir es behandeln können.

HINWEIS: Möglicherweise müssen Sie zuerst erneut speichern, BookDetails.jsxum dies zu erstellenWARNING

Wenn wir in die React Docs graben , können wir die halb verwirrenden Lösungsvorschläge WARNINGwie folgt entschlüsseln:

1. Fügen Sie die Funktionsdefinition in die useEffect.

• Wir können diese Funktion nicht anderswo aufrufen, es sei denn, wir definieren sie neu.

• Dies löst useEffect jedes Mal aus, wenn sich der Status oder die Requisiten ändern, was manchmal zu einem unendlichen Re-Rendering führt. Und da wir in unserem Fall unsere State-Setter-Funktion nach einem API-Aufruf aufrufen, könnte dies unsere API mit unendlichen Endpunktanforderungen überlasten.

• Die Funktion wird nicht aufgerufen.

• Wenn die Komponente das erste Mal rendert, definiert sie unsere Funktion, die das auslöst useEffect, wodurch die Komponente erneut gerendert wird, wodurch die Funktion neu definiert wird, wodurch das ausgelöst wird useEffect, wodurch die Komponente erneut gerendert wird, which wird die Funktion neu definieren…

Die einfachste und bevorzugte Lösung wäre, sie einzuschließen, d. h. die getBookDetailsFunktionsdefinition in die useEffect. Dies folgt einem Prinzip der objektorientierten Programmierung, das als Encapsulation bekannt ist .

Aber nehmen wir an, wir wissen, dass wir die Funktion woanders aufrufen müssen. Sollten wir es später neu definieren? Das ist nicht sehr TROCKEN von uns.

Lassen Sie uns unser Abhängigkeitsarray so ändern, dass es unsere Funktionsreferenz enthält. Ihr useEffectsolltet jetzt so aussehen.

Und getBookDetailsbleibt über dem definiert useEffect.

Jetzt haben wir eine neueWARNING

Geben Sie den useCallback-Hook ein

Kurz gesagt, der useCallbackHook ermöglicht es Ihnen, eine Funktion zwischenzuspeichern oder zu „merken“, wenn Sie Ihre Komponente erneut rendern. Es erfüllt eine ähnliche Aufgabe wie useMemo, auf deren Nuancen wir in einem anderen Artikel eingehen werden.

Wenn dich das Wesentliche interessiert, kannst du mehr in der React-Dokumentation nachlesen .

Bitte beachten Sie ihre Warnung:

Sie sollten sich nur auf useCallbackso eine Leistungsoptimierung verlassen. Wenn Ihr Code ohne sie nicht funktioniert, finden Sie das zugrunde liegende Problem und beheben Sie es zuerst. Dann können Sie hinzufügen useCallback, um die Leistung zu verbessern.

useCallbackSyntax

useCallbackuseEffectDie Syntax von ist der uns bereits bekannten sehr ähnlich . Sieh dir die Skelette von jedem an.

Der kleine Unterschied besteht darin useEffect, dass wir mit die anonyme Funktion anweisen, unsere Funktion auszuführen , während useCallbackwir mit den Rückgabewert einer Referenz zuweisen, die an anderer Stelle aufgerufen werden soll.

Verwenden von useCallback

Zuerst importieren wir useCallbackaus 'react'. Anstatt eine neue Zeile hinzuzufügen, ist es am besten, sie zusammen mit unseren anderen Importen zu destrukturieren.

Jetzt können wir den von einem Funktionsaufruf getBookDetailszurückgegebenen Wert zuweisen.useCallback

Dann fügen wir die gesamte Syntax für hinzu useCallback. Denken Sie an Ihr Abhängigkeitsarray!

In unserem Beispiel brauchen wir asyncvor unseren Parametern.

Und schließlich fügen wir die Logik unserer Funktion in den Codeblock ein.

Sobald wir speichern, erhalten wir … eine weitere WARNING.

Warum sollte unser Abhängigkeitsarray die idVariable verfolgen?

Lassen Sie uns das durchdenken.

• Wenn sich der Wert von idändert, getBookDetailsmuss ein anderer Endpunkt erreicht werden, also sollte React ihn neu definieren. Die Definition von hängtgetBookDetails buchstäblich vom Wert von ab .id

Und schließlich, das ist es! Wir sehen grün in unserem React-Dev-Server. Ein glücklicher Linter ist ein glücklicher Senior Developer. Und ein glücklicher Senior Developer ist ein glückliches Du!

Ich bin immer auf der Suche nach neuen Freunden und Kollegen. Wenn Sie diesen Artikel hilfreich fanden und sich mit mir in Verbindung setzen möchten, finden Sie mich in jedem meiner Häuser im Internet.

GitHub | Zwitschern | LinkedIn | Webseite

Ressourcen

• Referentielle Gleichheit
• Primitive JavaScript-Datentypen vs. Datenstrukturen
• Verkapselung
• useCallback
• Reagieren Sie auf Dokumente