룬 클래스의 Svelte에서 룬 공유

저는 일반적으로 TypeScript 프로젝트에서 클래스를 피하고 단순성과 트리 쉐이킹 이점을 위해 함수를 선호하지만 Svelte의 반응형 $state 변수가 있는 클래스를 사용하면 성능 이점을 제공할 수 있습니다. Rich Harris 자신도 특정 상황에서 이러한 접근 방식을 제안합니다. 핵심은 클래스가 $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 중국어 웹사이트의 기타 관련 기사를 참조하세요!