在 Svelte 中與符文類別共享符文

雖然我通常會避免在 TypeScript 專案中使用類，而偏好函數的簡單性和搖樹效應的好處，但使用帶有 Svelte 反應式 $state 變數的類別可以提供效能優勢。 里奇·哈里斯本人在某些情況下建議採用這種方法。 關鍵是類別繞過了與 $state 變數的 getter 和 setter 相關的編譯開銷。

可共享的符文課程

這需要一個利用 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 變數的初始化僅在父元件內發生一次：

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

• Repo 連結（如果有，請提供）
• 示範連結（如果有請提供）

這種方法提供了一種結構化且高效能的方法來管理 Svelte 應用程式中的共享反應狀態。

以上是在 Svelte 中與符文類別共享符文的詳細內容。更多資訊請關注PHP中文網其他相關文章！