在 Svelte 中与符文类共享符文

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《在 Svelte 中与符文类共享符文》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

我通常避免在 TypeScript 代码中使用类，倾向于使用函数以简化代码，并利用 tree shaking 的优势避免引入不必要的类方法。

然而，Rich Harris 建议在某些情况下使用符文类可以提高性能，因为它们无需使用 get 和 set 方法或中间 $state 变量来管理状态，从而直接操作状态。

可共享符文

我们需要一个可共享的符文类，这需要用到 Svelte 的上下文机制。

// rune.svelte.ts
import { get, has, set } from 'svelte';

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

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

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

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

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

    init(value: TRune): RCurrent<TRune> {
        const _value = { current: value };
        return set(this.#key, _value);
    }

    update(getter: () => TRune): void {
        const context = this.get();
        // 使用 $effect 或类似的响应式机制
        // ...  (此处需要根据实际的响应式机制进行调整) ...
    }
}

我们可以导出自定义符文到其他组件中使用。

// counter.svelte.ts
import { Rune } from './rune.svelte';

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

这是共享状态的一种方法，它与服务器端渲染兼容（详见之前的讨论）。 需要注意的是，我们需要为每个共享状态变量赋予一个唯一的名称。

初始化

状态的初始化，如同其他上下文一样，应该在父组件中进行，并且只初始化一次。

<script>
    import { counter } from '$lib/counter.svelte';

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

在子组件中读取

子组件可以安全地读取状态：

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

<h1>子组件：{count.current}</h1>
<button on:click={() => count.current++}>子组件递增</button>

响应式更新

更新共享状态需要通过一个函数来实现响应式更新：

<script>
    import { counter } from '$lib/counter.svelte';
    let value = 0; // 或者其他响应式变量

    counter.update(() => value);
</script>

<input type="number" bind:value>

这使得更新具有响应性。我们可以传入任何响应式变量，它会像 $derived 一样更新。

直接更新

当然，也可以直接更新：

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

• 代码仓库
• 演示

希望这些信息对您有所帮助。

今天关于《在 Svelte 中与符文类共享符文》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！