Zustand 原始碼中的 Object.assign() 用法。

在這篇文章中，我們將了解Zustand的原始程式碼中如何使用Object.assign()。

上面的程式碼片段來自vanilla.ts，當你設定一個狀態時，Object.assign 用來更新你的狀態物件。

我們先來了解Object.assign的基礎知識：

對象.分配()

Object.assign() 靜態方法將所有可枚舉的自有屬性從一個或多個來源物件複製到目標物件。它傳回修改後的目標物件。

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將被替換，或者如果nextState不是對象，則按原樣返回nextState，但我們感興趣的是Object.assign({}, state, newState)。

讓我們先記錄並查看更新狀態時狀態和 nextState 中的內容。我選擇的範例來自 Zustand 原始碼中的演示範例。我稍微修改了程式碼，以便我們可以放置一些控制台語句並執行這些實驗。

在這個簡單的範例中，當計數遞增時，它歸結為使用 Object.assign 更新狀態物件。

下次，您嘗試對 JSON 物件執行一些更新時，請使用 Object.assign。

關於我們：

在 Think Throo，我們的使命是教授受開源專案啟發的最佳實踐。

透過在 Next.js/React 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo（請給我們一顆星！）

想要為您的企業建立客製化網路系統？請透過 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中文網其他相關文章！