状態のソースコードでの Set() の使用法。-jsチュートリアル-php.cn

状態のソースコードでの Set() の使用法。

WBOY

リリース： 2024-09-06 06:31:10

オリジナル

1112 人が閲覧しました

この記事では、Zustand のソースコードで Set() メソッドがどのように使用されているかを理解します。

Set() usage in Zustand’s source code.

つまり、Zustand のリスナーは基本的にセットです。上記のコードスニペットは vanilla.ts

から抜粋されました。

設定

Set オブジェクトを使用すると、プリミティブ値でもオブジェクト参照でも、あらゆるタイプの一意の値を保存できます。セットオブジェクトは値のコレクションです。セット内の値は 1 回だけ出現します。それはセットのコレクションの中でユニークです。セットの要素を挿入順に反復処理できます。 — MDN ドキュメント

const mySet1 = new Set();

mySet1.add(1); // Set(1) { 1 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add("some text"); // Set(3) { 1, 5, 'some text' }

for (const item of mySet1) {
  console.log(item);
}
// 1, 5, 'some text'

ログイン後にコピー

リスナーは Zustand の関数サブスクライブに追加されます。購読について詳しく見てみましょう

subscribe 関数を使用すると、変更時に再レンダリングを強制することなく、コンポーネントを状態部分にバインドできます。アンマウント時に自動的にサブスクライブを解除するには、useEffect と組み合わせるのが最適です。ビューを直接変更できる場合、これによりパフォーマンスに劇的な影響が生じる可能性があります。

const useScratchStore = create((set) => ({ scratches: 0, ... }))
const Component = () => {
  // Fetch initial state
  const scratchRef = useRef(useScratchStore.getState().scratches)
  // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
  useEffect(() => useScratchStore.subscribe(
    state => (scratchRef.current = state.scratches)
  ), [])
  ...

ログイン後にコピー

次に、Zustand のサブスクライブのソースコードを見てみましょう。

const subscribe: StoreApi<TState>['subscribe'] = (listener) => {
    listeners.add(listener)
    // Unsubscribe
    return () => listeners.delete(listener)
}

ログイン後にコピー

subscribe は単にリスナーをリスナーセットに追加するだけです。

実験のログが何を示しているか見てみましょう。 console.log ステートメントを追加するために、コマンド pnpm run build を使用して Zustand をコンパイルし、dist を example/demo/src にコピーしました。ハックっぽく見えますが、私たちは実験を行っており、Zustand が内部でどのように機能するかを解明しています。

Set() usage in Zustand’s source code.

リスナー Set は次のようになります

Set() usage in Zustand’s source code.

App.jsx の変更をサブスクライブしました

// Subscribe to changes in the state
useStore.subscribe((state) => {
  console.log("State changed: ", state);
});

ログイン後にコピー

もう 1 つの観察は、このセットに追加された追加のリスナーがあるということです。

ƒ () {
  if (checkIfSnapshotChanged(inst)) {
    forceStoreRerender(fiber);
  }
}

ログイン後にコピー

私たちについて:

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#L62
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
https://github.com/pmndrs/zustand/tree/main?tab=readme-ov-file#transient-updates-for-often-occurring-state-changes

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