状態のソースコード内の setState。-jsチュートリアル-php.cn

状態のソースコード内の setState。

WBOY

リリース： 2024-09-06 06:43:02

オリジナル

1151 人が閲覧しました

この記事では、Zustand のソースコードの setState の書き方/動作についてレビューします。この概念は、JavaScript のクロージャーとアロー関数を活用します。

setState in Zustand

StoreApi タイプは簡単です。

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

ログイン後にコピー

setState は 2 つのパラメータを受け入れます

部分

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

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

setState in Zustand

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

setState in Zustand

ここでは、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/

参考文献:

https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L64
https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L9
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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