ルーンクラスでスヴェルテのルーンを共有する-jsチュートリアル-php.cn

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

DDD

リリース： 2025-01-16 13:00:00

オリジナル

379 人が閲覧しました

Sharing Runes in Svelte ith the Rune Class

私は通常、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>

ログイン後にコピー