„Helfer'-Variablen in Svelte 5

Bye Bye Magical Svelte 4 $:

Im Anschluss an meinen letzten Beitrag „Erfahrungen und Vorbehalte bei der Svelte 5-Migration“ möchte ich einige Techniken und eine Änderung der Denkweise beim Übergang von Svelte 4 zu Svelte 5 hervorheben.

Svelte 4 verwendet „magisches“ $: und erledigt die ganze schwere Arbeit, um den Code reaktiv zu machen. Wir haben uns auch für die Neuzuweisung von Variablen entschieden, z. B.

<script>
let arr = [1, 2, 3]
let value = 4

arr = [...arr, value]
</script>

anstelle von Methoden, die Variablen wie Push usw. aktualisieren/verändern.

Ich war ziemlich überrascht, die guten alten JS-Muster mit Svelte 5 neu zu lernen.

Sie müssen nicht ständig reagieren

Und ich war wahrscheinlich auch ziemlich verwöhnt, als ich Svelte 4 eingelassen habe, keine Überlegungen zur Reaktivität, es war bei Bedarf enthalten. Aber nicht alle Variablen müssen reaktiv sein. Auch nicht reaktive Variablen können in reaktivem oder sogar „traditionellem mutierendem Code“ aktualisiert werden. Der eigentliche Bedarf an einer reaktiven Variablen besteht, wenn wir sie in der Benutzeroberfläche verwenden (wenn diese Variable in HTML/Seite gerendert wird und wir sie später zur Aktualisierung benötigen).

In Svelte 5 kann es zu Fehlern kommen, z. B. „Zuordnung zum abgeleiteten Status nicht möglich, Status, auf den in seinem eigenen Bereich verwiesen wird, wird niemals aktualisiert“. Wollten Sie innerhalb eines Abschlusses darauf verweisen? oder derivative_references_selfnEin abgeleiteter Wert kann nicht rekursiv auf sich selbst verweisen, wenn der Svelte 4-Codierungsstil verwendet wird.

Beispiel für Hilfsvariablen

Sehen Sie sich dieses Beispiel des Svelte 4-Codestils an:

<script>
    let value;
    let derivedArr = []

    $: if (value) {
        derivedArr = [...derivedArr, value]
    }

    function random () {
        value = Math.floor(1 + Math.random() * 10)
    }
</script>

<button on:click="{random}">Generate Random Value</button>
<p>value: {value}</p>
<p>derivedArr: {derivedArr}</p>

DEMO

Wir haben zwei reaktive Variablen und Svelte 4 löst die Aktualisierungen automatisch. Wir mussten uns nur daran erinnern, dass der richtige Weg darin besteht, die Variable neu zuzuweisen.

In Svelte 5 sollten wir ein wenig darüber nachdenken, wie wir das gleiche Ergebnis erzielen können. Die beiden Variablen, die wir verwenden, reichen nicht aus, wir brauchen noch eine, die Hilfsvariable.

Die bevorzugte Methode ist die Verwendung einer $derived()-Rune.

<script>
    let value = $state();
    let helperArr = [];

    let derivedArr = $derived.by(() => {
      if (value) {
                helperArr.push(value);
                return helperArr;
        }
    });

    function random () {
        value = Math.floor(1 + Math.random() * 10)
    }
</script>

<button onclick="{random}">Generate Random Value</button>
<p>value: {value}</p>
<p>derivedArr: {derivedArr}</p>

DEMO

Wenn Sie einen einfacheren Weg kennen, lassen Sie es mich wissen.

Es gibt auch eine $effect()-Rune-Methode, um dasselbe zu erreichen. Es sieht vielleicht noch einfacher aus, aber wir sollten Effekte nach Möglichkeit vermeiden (hauptsächlich Svetlet 5-Effekte laufen nicht auf dem Server/SSR).

<script>
    let value = $state();
    let helperArr = []
    let effectArr = $derived(helperArr);

    $effect.pre(() => {
            if (value) {
              helperArr.push(value)
            }
        })

    function random () {
        value = Math.floor(1 + Math.random() * 10)
    }
</script>

<button onclick="{random}">Generate Random Value</button>
<p>value: {value}</p>
<p>effectArr: {effectArr}</p>

DEMO

Beispiel aus dem wirklichen Leben

Dies ist das Beispiel, wie ich versucht habe, die Svelte 4-Seite ganz direkt auf Svelte 5 zu migrieren. Es hat eine Weile gedauert, bis ich den Code überdacht habe. Diese Seite funktioniert als Beitragssuche mit einer „Mehr laden“-Funktion (Hinzufügen von Ergebnissen oder Paginieren, wenn ein Benutzer kein JS hat):

Svelte 4

<script>
    Importieren Sie das Symbol aus '../components/Icon.svelte';
    import { Enhance } from '$app/forms';
    import { tick } from 'svelte';

    Formular exportieren;
    export let searchLang;
    export let l;

    let results = [];
    let previousSearch = '';
    let searchTerm;
    überspringen lassen;

    $: if (!!form && form?.thereIsMore) {
        searchTerm = form.searchTerm;
        skip = Number(form?.skip) 20;
    }

    $: if (!!form?.searchResultFromAction) {
        if ( previousSearch == form.searchTerm && form.thereWasMore) {
            results = [...results, ...form.searchResultFromAction];
        } anders {
            results = [...form.searchResultFromAction];
            previousSearch = form.searchTerm;
        }
    }

    asynchrone Funktion intoView(el) {
        warte auf tick();
        if (el.attributes.index.nodeValue == überspringen - 20 && überspringen != undefiniert) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    }
</script>

{#if results.length}
    <ol>
        {#each results as item, index}
            <li use:intoview aria-posinset="{index}">
                <!-- Benutzer ohne Javascript haben die Reihenfolge der Ergebnisse innerhalb der Paginierung berechnet und CSS deaktiviert die Standard-OL-UL-Nummerierung -->
                <!-- Benutzer mit Javascript haben die standardmäßige alte UL-Nummerierung und laden mehr Funktionen -->
                <noscript>{Number(index) 1 Number(form?.skip)}. </noscript>
                <a href="/act/%7BsearchingLang%7D/%7Bitem.id%7D/present/text">{item.title}</a>
            </li>
        {/jede}
    </ol>

    {#if form?.thereIsMore}
        

Svelte 5

<script>
    Importieren Sie das Symbol aus '../components/Icon.svelte';
    import { Enhance } from '$app/forms';
    import { tick } from 'svelte';

    let { form, searchLang, l } = $props();

    let previousSearch = '';
    let skip = $derived.by(() => {
        if (!!form && form?.thereIsMore) {
            return Number(form?.skip) 20;
        }
    });

    let helperResultsArr = [];
    let results = $derived.by(() => {
        if (!!form?.searchResultFromAction) {
            if ( previousSearch == form.searchTerm && form.thereWasMore) {
                helperResultsArr.push(...form.searchResultFromAction);
                return helperResultsArr;
            } anders {
                helperResultsArr = [];
                helperResultsArr.push(...form.searchResultFromAction);
                previousSearch = form.searchTerm;
                return helperResultsArr;
            }
        } else return [];
    });

    asynchrone Funktion intoView(el) {
        warte auf tick();
        if (el.attributes.index.nodeValue == überspringen - 20 && überspringen != undefiniert) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    }
</script>

{#if results.length}
    <ol>
        {#each results as item, index}
            <li use:intoview aria-posinset="{index}">
                <!-- Benutzer ohne Javascript haben die Reihenfolge der Ergebnisse innerhalb der Paginierung berechnet und CSS deaktiviert die Standard-OL-UL-Nummerierung -->
                <!-- Benutzer mit Javascript haben die standardmäßige alte UL-Nummerierung und laden mehr Funktionen -->
                <noscript>{Number(index) 1 Number(form?.skip)}. </noscript>
                <a href="/act/%7BsearchingLang%7D/%7Bitem.id%7D/present/text">{item.title}</a>
            </li>
        {/jede}
    </ol>

    {#if form?.thereIsMore}
        

Das ist alles für den Moment.

PS: Zögern Sie nicht, mir mitzuteilen, ob Sie die Migration anders durchführen würden.

Das obige ist der detaillierte Inhalt von„Helfer'-Variablen in Svelte 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!