Verwendung von Object.assign() im Quellcode von Zustand.

In diesem Artikel werden wir verstehen, wie Object.assign() im Quellcode von Zustand verwendet wird.

Der obige Codeausschnitt stammt von Vanilla.ts. Wenn Sie einen Status festlegen, wird Object.assign verwendet, um Ihr Statusobjekt zu aktualisieren.

Lassen Sie uns zunächst die Grundlagen von Object.assign verstehen:

Object.assign()

Die statische Methode Object.assign() kopiert alle aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt. Es gibt das geänderte Zielobjekt zurück.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

b-Wert im Zielobjekt wird durch b-Wert im Quellobjekt ersetzt.

Ganz einfach, oder? Lassen Sie uns nun einige Experimente durchführen und verstehen, wie setState von Zustand die Methode Object.assign() nutzt.

Object.assign() im Quellcode von Zustand:

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

Das ist der verschachtelte ternäre Operator im obigen Codeausschnitt. Wenn das Ersetzen nicht null ist, wird der Status ersetzt, oder wenn der nextState kein Objekt ist, geben Sie nextState einfach so zurück, wie es ist, aber was uns interessiert, ist Object.assign({}, state, newState).

Lass uns zuerst protokollieren und sehen, was sich im Status befindet, und dann den nächsten Status, wenn du deinen Status aktualisierst. Das Beispiel, das ich ausgewählt habe, stammt aus dem Demo-Beispiel im Quellcode von Zustand. Ich habe den Code ein wenig geändert, damit wir einige Konsolenanweisungen einfügen und diese Experimente ausführen können.

In diesem einfachen Beispiel kommt es beim Erhöhen der Anzahl darauf an, das Statusobjekt mithilfe von Object.assign zu aktualisieren.

Wenn Sie das nächste Mal versuchen, einige Aktualisierungen an Ihrem JSON-Objekt durchzuführen, verwenden Sie Object.assign.

Über uns:

Bei Think Throo haben wir die Mission, die Best Practices zu vermitteln, die von Open-Source-Projekten inspiriert sind.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

Wir sind Open Source  –  https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Möchten Sie maßgeschneiderte Websysteme für Ihr Unternehmen erstellen? Kontaktieren Sie uns unter hello@thinkthroo.com

Über den Autor:

Hey, ich bin Ram. Ich bin ein leidenschaftlicher Softwareentwickler/OSS-Tüftler.

Schauen Sie sich meine Website an: https://www.ramunarasinga.com/

Referenzen:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Das obige ist der detaillierte Inhalt vonVerwendung von Object.assign() im Quellcode von Zustand.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!