state 原始碼中的 setState。

在這篇文章中，我將回顧 Zustand 原始碼中的 setState 是如何編寫/工作的。這個概念利用了 JavaScript 中的閉包和箭頭函數。

StoreApi 類型很簡單。

export interface StoreApi<T> {
  setState: SetStateInternal<T>
  getState: () => T
  getInitialState: () => T
  subscribe: (listener: (state: T, prevState: T) => void) => () => void
}

setState 接受兩個參數

1. 部分

2. 替換

讓我們使用 Zustand 儲存庫中提供的範例示範應用程式進行實驗。

我在 dist 中加入了一些控制台語句來查看部分內容並替換。

這就是您在示範範例中更新計數時的值。

由於這裡的partial是函數，

 

const nextState = typeof partial === "function" ? partial(state) : partial;

如果仔細觀察，狀態會在 createStore 時初始化，並且位於 setState 函數之外。這是否敲響了警鐘？請參閱 Javascript 中的閉包。

partial 是一個箭頭函數

(state)=>({
    count: state.count + 1
})

美妙之處在於，您可以使用參數來呼叫這些函數，因為它會傳回一個函數，這就是為什麼我們有partial(state)並且state位於setState之外。由於 JavaScript 中的閉包，setState 可以存取此狀態變數。

您可以在瀏覽器控制台中執行以下程式碼片段，它會記錄您作為參數發送的內容。

(a => console.log(a))("test")
// Output: test

我寫了關於Object.is和Object.assign用法的詳細文章。由於替換為空，

if (!Object.is(nextState, state)) {
  const previousState = state
  state =
    (replace ?? (typeof nextState !== 'object' || nextState === null))
      ? (nextState as TState)
      : Object.assign({}, state, nextState)
  listeners.forEach((listener) => listener(state, previousState))
}

狀態是使用 Object.assign 更新的。我們將在以後的文章中研究替換不為空的高級用例，並了解 setState 的行為方式。

關於我們：

在 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#L64

2. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L9

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

以上是state 原始碼中的 setState。的詳細內容。更多資訊請關注PHP中文網其他相關文章！