状態のソースコード内の 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 は 2 つのパラメータを受け入れます

1. 部分

を置き換えます

Zustand リポジトリで提供されているサンプル デモ アプリを使用して実験を実行してみましょう。

partial と replace の内容を確認するために、dist にいくつかのコンソール ステートメントを追加しました。

デモの例でカウントを更新したときの値は次のとおりです。

ここでは、partial が関数であるため、

 

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

よく見ると、state は createStore 時に初期化されており、setState 関数の外にあります。それはベルを鳴らしますか？ 「JavaScript のクロージャ」を参照してください。

部分はアロー関数です

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

利点は、関数を返すため、パラメーターを使用してこれらの関数を呼び出すことができることです。そのため、partial(state) があり、状態は setState の外側にあります。 setState は、JavaScript のクロージャーのおかげで、この状態変数にアクセスできます。

ブラウザ コンソールで以下のコード スニペットを実行すると、パラメータとして送信した内容がログに記録されます。

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

Object.is と Object.assign の使用法に関する詳細な記事を書きました。 replace が null なので、

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 を使用して更新されます。今後の記事では、replace が null ではない高度な使用例を見て、setState がどのように動作するかを理解します。

私たちについて：

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

以上が状態のソースコード内の setState。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。