首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2024-09-05 06:39:32
原創
503 人瀏覽過

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

Object.assign() usage in Zustand

上面的程式碼片段來自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() usage in Zustand

Object.assign() usage in 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!