ルーンクラスでスヴェルテのルーンを共有する

私は通常、TypeScript プロジェクトではクラスを避け、シンプルさとツリーシェイキングの利点から関数を好みますが、Svelte のリアクティブな $state 変数を含むクラスを使用するとパフォーマンス上の利点が得られます。 リッチ・ハリス自身が、特定の状況でこのアプローチを提案しています。 重要なのは、クラスが $state 変数のゲッターとセッターに関連するコンパイルのオーバーヘッドをバイパスすることです。

共有可能なルーンクラス

これには、Svelte のコンテキスト API を活用する共有可能な Rune クラスが必要です。

<code class="language-typescript">// rune.svelte.ts
import { getContext, hasContext, setContext } from "svelte";

type RCurrent<TValue> = { current: TValue };

export class Rune<TRune> {
    readonly #key: symbol;

    constructor(name: string) {
        this.#key = Symbol(name);
    }

    exists(): boolean {
        return hasContext(this.#key);
    }

    get(): RCurrent<TRune> {
        return getContext(this.#key);
    }

    init(value: TRune): RCurrent<TRune> {
        const _value = $state({ current: value }); // Assuming '$state' is available from a library like 'svelte-state'
        return setContext(this.#key, _value);
    }

    update(getter: () => TRune): void {
        const context = this.get();
        $effect(() => { // Assuming '$effect' is available from a library like 'svelte-state'
            context.current = getter();
        });
    }
}</code>

必要に応じてカスタム ルーンをエクスポートできます:

<code class="language-typescript">// counter.svelte.ts
import { Rune } from "./rune.svelte";

export const counter = new Rune<number>('counter');</code>

この方法は、一般的な $state 共有手法に似ていますが、(以前の投稿で説明したように) サーバー側の互換性を提供します。 コンテキストの命名は標準の規則に従います。

初期化

$state 変数の初期化は、親コンポーネント内で 1 回だけ行われます:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';

    const count = counter.init(0);
</script></code>

値の読み取り

子コンポーネントは現在の値に安全にアクセスして読み取ることができます:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';
    const count = counter.get();
</script>

<h1>Hello from Child: {count.current}</h1>
<button on:click={() => count.current++}>Increment From Child</button></code>

事後的な更新

共有 $state を更新するには、反応性をトリガーする関数が必要です:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';
    let value = $state(8); // Assuming '$state' is available
    counter.update(() => value);
</script></code>

これにより、リアクティブな更新が可能になり、$derived と同様にシグナルを処理し、変数を保存できます。

直接更新

直接アップデートもサポートされています:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';
    const count = counter.get();
    count.current = 9;
</script></code>

• リポジトリのリンク (可能な場合は提供してください)
• デモリンク (利用可能な場合は提供してください)

このアプローチは、Svelte アプリケーションで共有リアクティブ状態を管理する構造化されたパフォーマンスの高い方法を提供します。

以上がルーンクラスでスヴェルテのルーンを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。