Berkongsi Rune dalam Svelte dengan Kelas Rune

Walaupun saya biasanya mengelak kelas dalam projek TypeScript saya, mengutamakan fungsi untuk kesederhanaan dan faedah menggegar pokok, menggunakan kelas dengan pembolehubah $state reaktif Svelte boleh menawarkan kelebihan prestasi. Rich Harris sendiri mencadangkan pendekatan ini dalam situasi tertentu. Perkara utama ialah kelas memintas overhed kompilasi yang dikaitkan dengan pengambil dan penetap untuk $state pembolehubah.

Kelas Rune Boleh Kongsi

Ini memerlukan kelas Rune boleh kongsi yang memanfaatkan API konteks Svelte.

// 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();
        });
    }
}

Kami kemudiannya boleh mengeksport rune tersuai seperti yang diperlukan:

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

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

Kaedah ini, walaupun serupa dengan teknik perkongsian $state biasa, menawarkan keserasian bahagian pelayan (seperti yang dibincangkan dalam siaran sebelumnya). Penamaan konteks mengikut konvensyen standard.

Permulaan

Pemulaan pembolehubah $state berlaku sekali sahaja, dalam komponen induk:

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

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

Membaca Nilai

Komponen kanak-kanak boleh mengakses dan membaca nilai semasa dengan selamat:

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

Kemas Kini Reaktif

Mengemas kini $state yang dikongsi memerlukan fungsi untuk mencetuskan kereaktifan:

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

Ini membolehkan kemas kini reaktif, mengendalikan isyarat dan menyimpan pembolehubah sama seperti $derived.

Kemas Kini Langsung

Kemas kini langsung juga disokong:

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

• Pautan Repo (Sila berikan jika ada)
• Pautan Demo (Sila berikan jika ada)

Pendekatan ini menyediakan cara berstruktur dan berprestasi untuk mengurus keadaan reaktif yang dikongsi dalam aplikasi Svelte.

Atas ialah kandungan terperinci Berkongsi Rune dalam Svelte dengan Kelas Rune. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!