Zustand のソースコードでの Object.assign() の使用法。

この記事では、Zustand のソース コードで Object.assign() がどのように使用されているかを理解します。

上記のコード スニペットは vanilla.ts からのものです。状態を設定すると、Object.assign を使用して状態オブジェクトが更新されます。

まず Object.assign の基本を理解しましょう:

Object.assign()

Object.assign() 静的メソッドは、列挙可能なすべての独自のプロパティを 1 つ以上の ソース オブジェクト から ターゲット オブジェクト にコピーします。変更されたターゲット オブジェクトを返します。

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 値は、ソース オブジェクトの b 値に置き換えられます。

本当にシンプルですよね?ここでいくつかの実験を実行し、Zustand の setState が Object.assign() メソッドをどのように利用するかを理解しましょう。

Zustand のソースコード内の Object.assign():

// 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);

これは、上記のコード スニペットにあるネストされた三項演算子です。 replace が null でない場合は、state が replace になります。 nextState がオブジェクトではない場合は、nextState をそのまま返しますが、ここで興味があるのは Object.assign({}, state, newState) です。

まずログを記録して、状態を更新するときの状態と nextState を確認しましょう。私が選んだ例は、Zustand のソース コードのデモ例からのものです。いくつかのコンソール ステートメントを追加して実験を実行できるように、コードを少し変更しました。

この単純な例では、カウントが増加すると、Object.assign を使用して状態オブジェクトが更新されます。

次回、JSON オブジェクトに対して更新を実行しようとすると、Object.assign を使用します。

私たちについて：

Think Throo では、オープンソース プロジェクトからインスピレーションを得たベスト プラクティスを教えるという使命を担っています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、実稼働レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

あなたのビジネスに合わせたオーダーメイドの Web システムを構築したいですか? hello@thinkthroo.com

までご連絡ください。

著者について:

こんにちは、ラムです。私は情熱的なソフトウェア エンジニア/OSS Tinkerer です。

私のウェブサイトをチェックしてください: https://www.ramunarasinga.com/

参考文献:

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

以上がZustand のソースコードでの Object.assign() の使用法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。