在 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中文网其他相关文章！