Unveränderlichkeit im JavaScript verstehen

Das Konzept der Invarianz in JavaScript kann mit einer variablen Neuzuweisung verwechselt werden. Variablen, die mit let oder var deklariert sind, können neu zugewiesen werden, aber von const deklarierte Variablen können dies nicht können.

Weisen Sie beispielsweise "Kingsley" einer Variablen mit dem Namen firstName zu: zu, "Kingsley" zuzuweisen:

 lass firstname = "Kingsley";

Neuzuweisung kann durchgeführt werden:

 FirstName = "John";

Dies liegt daran, dass let verwendet wird. Wenn konst: const :

 const lastname = "silas";

Der Versuch zu neu zuweisen führt zu einem Fehler:

 Lastname = "doe";
// typeerror: Zuordnung zur konstanten Variablen.

Dies ist jedoch keine Unveränderlichkeit.

In Frameworks wie React besteht ein wichtiges Konzept darin, eine direkte Änderung von Zuständen und Eigenschaften (Requisiten) zu vermeiden. Invarianz ist kein einzigartiges Konzept des React, sondern ein wichtiges Prinzip, das React im Umgang mit Zuständen und Eigenschaften verwendet.

Was bedeutet Invarianz?

Invariante: Halten Sie sich an die Fakten

Die unveränderten Daten können ihre Struktur oder die darin enthaltenen Daten nicht ändern. Es weist den Wert einer Variablen zu, die nicht geändert werden kann, und macht den Wert in gewissem Sinne zu einer Quelle der Wahrheit - wie eine Prinzessin einen Frosch küsst und möchte, dass er ein gutaussehender Prinz wird. Invarianz bedeutet, dass ein Frosch immer ein Frosch sein wird.

Während Objekte und Arrays Mutation ermöglichen, bedeutet dies, dass die Datenstruktur geändert werden kann. Wenn wir es sagen, könnte das Küssen eines dieser Frösche zu einer Transformation führen, die sich in einen Prinzen verwandelt.

Zum Beispiel ein Benutzerobjekt:

 Lassen Sie User = {Name: "James Doe", Ort: "Lagos"};

Erstellen Sie ein neues newUser -Objekt:

 lass Newuser = Benutzer;

Wenn der erste Benutzer den Speicherort ändert, ändert er user Benutzerobjekt direkt und wirkt sich newUser aus:

 user.location = "abia";
console.log (newuser.location); // "Abia"

Dies ist möglicherweise nicht das Ergebnis, das wir wollen. Diese Neuzuweisung kann unbeabsichtigte Konsequenzen haben.

Verwenden Sie unveränderte Objekte

Wir müssen sicherstellen, dass das Objekt nicht mutiert ist. Wenn Sie eine Methode verwenden möchten, muss sie ein neues Objekt zurückgeben. Im Wesentlichen brauchen wir eine reine Funktion .

Reine Funktionen haben zwei Eigenschaften:

1. Der Rückgabewert hängt vom eingehenden Parameter ab. Solange die Eingabe unverändert bleibt, ändert sich der Rückgabewert nicht.
2. Es ändert sich nicht außerhalb seines Geltungsbereichs.

Mit Object.assign() können wir eine Funktion erstellen, die das eingehende Objekt nicht ändert. Es wird ein neues Objekt erstellt und die zweiten und dritten Parameter in das als erste Parameter übergebene leere Objekt kopiert und dann das neue Objekt zurückgibt.

 const updatelocation = (Daten, NewLocation) => {
  return Object.assign ({}, Daten, {Ort: NewLocation});
};

updateLocation() ist eine reine Funktion. Wenn wir das erste Benutzerobjekt übergeben, wird ein neues Benutzerobjekt mit location mit einem neuen Wert zurückgegeben.

Eine andere Möglichkeit besteht darin, den Erweiterungsoperator zu verwenden:

 const updatelocation = (Daten, NewLocation) => {
  return {... Daten, Ort: NewLocation};
};

Was hat das mit React zu tun?

Invarianz in React

In einer typischen Reaktionsanwendung ist ein Zustand ein Objekt. (Redux verwendet invariante Objekte als Grundlage für die Anwendungsspeicherung.) Der Koordinationsprozess von React bestimmt, ob eine Komponente neu geführt werden sollte oder ob sie eine Möglichkeit erfordert, Änderungen zu verfolgen.

Mit anderen Worten, wenn React nicht feststellen kann, dass sich der Status der Komponente geändert hat, wird nicht wissen, dass die virtuelle DOM aktualisiert wird.

Die Durchsetzung der Invarianz ermöglicht es, diese Änderungen zu verfolgen . Dies ermöglicht es, den alten Zustand des Objekts und seinen neuen Zustand zu vergleichen und die Komponente basierend auf diesem Unterschied erneut zu rendern.

Aus diesem Grund wird normalerweise nicht empfohlen, den Status in React direkt zu aktualisieren:

 this.state.username = "Jamesdoe";

React ist nicht sicher, ob sich der Staat geändert hat und die Komponente nicht erneut geschickt werden kann.

Unveränderlich.js

Redux folgt dem Prinzip der Invarianz. Die Reduzierer sollten reine Funktionen sein, daher sollten sie den aktuellen Zustand nicht ändern, sondern ein neues Objekt basierend auf dem aktuellen Zustand und der aktuellen Aktion zurückgeben. Wir verwenden normalerweise Erweiterungsoperatoren wie zuvor, aber wir können eine Bibliothek namens Imbum.js verwenden, um den gleichen Effekt zu erzielen.

Während reines JavaScript die Invarianz bewältigen kann, gibt es möglicherweise einige Fallstricke. Verwenden Sie Untimustable.js , um die Invarianz zu gewährleisten und gleichzeitig eine reichhaltige API mit überlegener Leistung bereitzustellen. Dieser Artikel wird nicht auf Details zu allen Details von Immutability.js eingehen, aber wir werden uns ein einfaches Beispiel ansehen, das zeigt, wie sie in einer von React und Redux betriebenen Aufgabenanwendung verwendet werden.

Beginnen wir zunächst mit dem Importieren der erforderlichen Module und der Einrichtung der Todo -Komponente.

 const {list, map} = unveränderlich;
const {Provider, Connect} = Reactredux;
const {CreateStore} = Redux;

Wenn Sie auf einer lokalen Maschine arbeiten, müssen Sie diese Pakete installieren:

 NPM installieren redux react-redux unveränderlich

Die Importaussage sieht Folgendes aus:

 {list, map} aus "unveränderlich" importieren;
{Provider, Connect} aus "React-Redux" importieren;
Import {CreateStore} aus "Redux";

Anschließend können wir unsere Todo -Komponente mit einigen Tags einrichten:

 // ... Todo -Komponentencode ...

Wir verwenden handleSubmit() , um ein neues Aufgabenelement zu erstellen. In diesem Fall erstellt der Benutzer nur ein neues Aufgabenelement, wir benötigen nur eine Aktion:

 // ... Aktionen Code ...

Die Nutzlast, die wir erstellen, enthält die ID und den Text des Aufgabenelements. Anschließend können wir die Reduzierfunktion festlegen und die oben erstellte Operation an die Reduzierfunktion übergeben:

 // ... Reduziercode ...

Wir werden connect verwenden, um eine Containerkomponente zu erstellen, damit wir eine Verbindung zum Speicher herstellen können. Anschließend müssen wir mapStateToProps() und mapDispatchToProps() -Funktionen übergeben, um eine Verbindung herzustellen.

 // ... Code verbinden ...

Wir verwenden mapStateToProps() um die gespeicherten Daten für die Komponente bereitzustellen. Anschließend verwenden wir mapDispatchToProps() um den Operation Creator der Komponente als Eigenschaft zur Verfügung zu stellen.

In der Reduzierfunktion verwenden wir List von Iminual.js, um den Ausgangszustand der Anwendung zu erstellen.

 // ... Reduziercode ...

Stellen Sie sich List als JavaScript -Array vor, weshalb wir die Methode .push() im state verwenden können. Der Wert, der zur Aktualisierung des Status verwendet wird, ist ein Objekt, das darauf hinweist, dass Map als Objekt erkannt werden kann. Auf diese Weise besteht keine Notwendigkeit, Object.assign() zu verwenden. Dies sieht viel prägnanter aus, insbesondere wenn Staaten tief verschachtelt sind - wir müssen nicht überall Erweiterungsbetreiber verwenden.

Mit dem unveränderten Zustand kann der Code schnell feststellen, ob eine Änderung eingetreten ist. Wir müssen die Daten nicht rekursiv vergleichen, um festzustellen, ob sich eine Änderung vorliegt. Es ist jedoch wichtig zu erwähnen, dass Sie bei der Behandlung großer Datenstrukturen Leistungsprobleme auftreten können - es gibt einen Preis, um große Datenobjekte zu kopieren.

Die Daten müssen jedoch geändert werden, da sonst keine dynamische Site oder Anwendung erforderlich ist. Wichtig ist, wie Sie die Daten ändern können . Invarianz bietet den richtigen Weg, um Anwendungsdaten (oder Status) zu ändern. Dies ermöglicht es, Änderungen im Zustand zu verfolgen und zu bestimmen, welche Teile der Anwendung aufgrund dieser Änderung neu geführt werden sollen.

Erstmals das Erlernen der Unveränderlichkeit kann verwirrend sein. Wenn der Zustand jedoch mutiert, werden Sie auf einen Fehler stoßen, der Sie besser macht. Dies ist normalerweise der klarste Weg, um die Bedürfnisse und Vorteile der Invarianz zu verstehen.

Weitere Lesen

• Invarianz in React und Redux
• Unveränderlich.js 101 - Karten und Listen
• Verwenden von Imbuming.js mit Redux

Beachten Sie, dass der ursprüngliche Text eine große Anzahl von Codeblöcken enthält. Um die Pseudooriginalität zu gewährleisten und eine übermäßige Wiederholung zu vermeiden, vereinfachte ich die Beschreibung einiger Codeblöcke und habe Synonyme und Satz-Twaks zu einigen Aussagen gemacht. Das Bildformat bleibt gleich.

Das obige ist der detaillierte Inhalt vonUnveränderlichkeit im JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!