Svelte 5의 '도우미' 변수

안녕 마법의 Svelte 4 $:

최근 게시물 Svelte 5 마이그레이션의 경험 및 주의사항에 이어 Svelte 4에서 Svelte 5로 전환할 때의 몇 가지 기술과 사고방식의 변화를 강조하고 싶습니다.

Svelte 4는 "마법의" $:를 사용하고 코드를 반응적으로 만들기 위해 모든 무거운 작업을 수행합니다.
과 같은 변수 재할당도 수용했습니다.

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

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

푸시 등의 변수를 업데이트/변경하는 메서드 대신

Svelte 5를 사용하여 좋은 JS 패턴을 다시 배울 수 있어서 매우 놀랐습니다.

항상 반응할 필요 없음

그리고 아마도 Svelte 4에 반응성에 대한 추론이 없고 필요한 경우 포함되었기 때문에 상당히 버릇없었을 것입니다. 하지만 모든 변수가 반응형일 필요는 없습니다. 또한 비반응성 변수는 반응성 또는 심지어 "전통적인 돌연변이 코드"로 업데이트될 수 있습니다. 반응형 변수가 실제로 필요한 것은 UI에서 사용할 때입니다(이 변수가 html/페이지로 렌더링되고 나중에 업데이트해야 할 때).

Svelte 5에서는 파생 상태에 할당할 수 없으며 자체 범위에서 참조된 상태가 업데이트되지 않는 등의 오류가 발생할 수 있습니다. 클로저 내부에서 참조하려고 했나요? 또는 파생_참조_selfnSvelte 4 코딩 스타일을 사용하는 경우 파생된 값은 자신을 재귀적으로 참조할 수 없습니다.

도우미 변수의 예

Svelte 4 스타일 코드의 예를 살펴보세요.

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

데모

두 개의 반응 변수가 있으며 Svelte 4는 업데이트를 자동으로 해결합니다. 올바른 방법은 변수를 재할당하는 것임을 기억하면 됩니다.

Svelte 5에서는 동일한 결과를 얻는 방법을 조금 생각해 봐야 합니다. 우리가 사용하는 두 개의 변수로는 충분하지 않습니다. 도우미 변수가 하나 더 필요합니다.

선호되는 방법은 $derived() 룬을 사용하는 것입니다.

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

데모

더 쉬운 방법을 알고 계시다면 알려주세요.

동일한 결과를 얻기 위한 $효과() 룬 방식도 있습니다. 더 단순해 보일 수도 있지만 가능하면 효과를 피해야 합니다(주로 Svetlet 5 효과는 서버/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>

데모

실제 사례

이것은 Svelte 4 페이지를 Svelte 5로 매우 강력하게 마이그레이션하려고 시도한 방법의 예입니다. 코드를 다시 생각하는 데 시간이 좀 걸렸습니다. 이 페이지는 "추가 로드" 기능(사용자가 JS가 없는 경우 결과 추가 또는 페이징)을 사용하여 게시물 검색으로 작동합니다.

스벨트 4

    '../comComponents/Icon.svelte'에서 아이콘을 가져옵니다.
    '$app/forms'에서 { 강화 } 가져오기;
    'svelte'에서 { 진드기 } 가져오기;

    내보내기 양식;
    내보내기 검색Lang;
    수출하자 l;

    결과 = [];
    이전 검색 = '';
    검색어를 보자;
    건너 뛰자;

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

    $: if (!!form?.searchResultFromAction) {
        if (previousSearch == form.searchTerm && form.thereWasMore) {
            결과 = [...결과, ...form.searchResultFromAction];
        } 또 다른 {
            결과 = [...form.searchResultFromAction];
            이전검색 = form.searchTerm;
        }
    }

    비동기 함수 intoView(el) {
        틱()을 기다리세요;
        if (el.attributes.index.nodeValue == 건너뛰기 - 20 && 건너뛰기 != 정의되지 않음) {
            el.scrollIntoView({ 동작: '부드러운' });
        }
    }
스크립트>

{#if 결과.길이}
    
        {#각 결과는 항목, 색인으로}
            

{item.title}

{/각} {#if form?.reIsMore} 라벨>

스벨트 5

    '../comComponents/Icon.svelte'에서 아이콘을 가져옵니다.
    '$app/forms'에서 { 강화 } 가져오기;
    'svelte'에서 { 진드기 } 가져오기;

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

    이전 검색 = '';
    건너뛰기 = $derived.by(() => {
        if (!!form && form?.thereIsMore) {
            반환 번호(form?.skip) 20;
        }
    });

    helperResultsArr = [];
    결과 = $derived.by(() => {
        if (!!form?.searchResultFromAction) {
            if (previousSearch == form.searchTerm && form.thereWasMore) {
                helperResultsArr.push(...form.searchResultFromAction);
                helperResultsArr 반환;
            } 또 다른 {
                helperResultsArr = [];
                helperResultsArr.push(...form.searchResultFromAction);
                이전검색 = form.searchTerm;
                helperResultsArr 반환;
            }
        } 그렇지 않으면 []를 반환합니다.
    });

    비동기 함수 intoView(el) {
        틱()을 기다리세요;
        if (el.attributes.index.nodeValue == 건너뛰기 - 20 && 건너뛰기 != 정의되지 않음) {
            el.scrollIntoView({ 동작: '부드러운' });
        }
    }
스크립트>

{#if 결과.길이}
    
        {#각 결과는 항목, 색인으로}
            

{item.title}

{/각} {#if form?.reIsMore} 라벨>

지금은 그게 전부입니다.

PS: 다른 방식으로 마이그레이션하려는 경우 주저하지 말고 알려주세요.

위 내용은 Svelte 5의 '도우미' 변수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!