在這篇文章中，我們將了解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).

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

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

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

關於我們：

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

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

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

希望為您的企業建立客製化網路系統？請透過 [email protected] 與我們聯絡

關於作者：

嘿，我是拉姆。我是一名充滿熱情的軟體工程師/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