Svelte中带异步调用组件的条件渲染与避免额外请求

我有一个可切换显示/隐藏的Svelte组件，该组件会获取异步数据。由于异步调用速度较慢，希望避免不必要的请求，仅在组件可见（切换为开启状态）时发起请求。同时想实现仅渲染组件一次，之后仅在异步调用逻辑变化时重新渲染，而非切换显示/隐藏时就重新渲染，也就是对组件进行“缓存”。

已尝试的两种方案 #

两种方案共用以下DisplayResult.svelte子组件：

<!-- DisplayResult.svelte -->

<script lang="ts">
    export let getResultFn; 
    $: colorPromise = getResultFn();
</script>

{#await colorPromise}
    Loading...
{:then color}
    The color is {color}
{/await}

方案1：渲染后隐藏组件 #

始终渲染组件，非激活状态通过CSS隐藏。

• 问题：异步调用逻辑变化时会立即发起请求，成本过高；仅希望组件首次可见时请求，且切换频繁时仅给开启状态的组件更新数据；另外组件从未销毁，无法正常使用过渡动画。

对应的Item.svelte代码：

<!-- Item.svelte -->
<button on:click={() => { active = !active;}} >
    Toggle
</button>

<div 
    transition:slide
    class:hidden={!active}
>           
    <DisplayResult getResultFn={() => getResults(idx)} />
</div>

<style>
.hidden {
     display: none;
}
</style>

方案2：条件式切换组件 #

通过{#if}控制组件的创建与销毁，仅在可见时渲染。

• 优点：仅在组件可见时获取数据；支持过渡动画。
• 问题：每次切换显示时都会重新创建组件，发起重复请求。

对应的Item.svelte代码：

<!-- Item.svelte -->
<button on:click={() => { active = !active;}} >
    Toggle
</button>

{#if active}
 <div transition:slide >
    <DisplayResult getResultFn={() => getResults(idx)} />
 </div>
{/if}

兼顾两者优点的解决方案 #

可以通过父组件缓存数据+组件常驻+过渡动画的组合实现需求，核心思路是：

1. 父组件负责缓存异步请求结果，避免重复调用
2. 组件始终渲染，通过CSS控制显示/隐藏，保留过渡动画
3. 仅在组件首次激活或异步逻辑变化时更新数据

实现代码 #

方案A：父组件层面缓存结果

修改Item.svelte，新增缓存逻辑，确保相同请求只执行一次：

<!-- Item.svelte -->
<script>
    let active = false;
    // 用Map缓存每个idx对应的结果
    const resultCache = new Map();

    async function getCachedResult(idx) {
        if (!resultCache.has(idx)) {
            // 仅首次请求时调用异步接口
            const result = await getResults(idx);
            resultCache.set(idx, result);
        }
        return resultCache.get(idx);
    }
</script>

<button on:click={() => active = !active}>Toggle</button>

<div 
    transition:slide
    class:hidden={!active}
>           
    <DisplayResult getResultFn={() => getCachedResult(idx)} />
</div>

<style>
.hidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, height 0.3s ease;
}
/* 移除display:none，确保过渡动画生效 */
</style>

DisplayResult.svelte无需修改，因为父组件已经保证了不会重复发起请求，即使组件始终渲染，也只会在缓存不存在或逻辑变化时触发新请求。

方案B：子组件内部控制加载时机

如果希望缓存逻辑封装在子组件内，可以修改DisplayResult.svelte，新增active属性控制数据加载时机：

<!-- DisplayResult.svelte -->
<script lang="ts">
    export let getResultFn;
    export let active;

    let cachedColor = null;
    let isLoaded = false;

    // 仅在组件激活且未加载，或getResultFn变化时请求数据
    $: if (active && (!isLoaded || getResultFn)) {
        getResultFn().then(color => {
            cachedColor = color;
            isLoaded = true;
        });
    }
</script>

{#if active && !isLoaded}
    Loading...
{:else if cachedColor}
    The color is {cachedColor}
{/if}

对应的Item.svelte保持组件常驻，通过active属性传递状态：

<!-- Item.svelte -->
<script>
    let active = false;
</script>

<button on:click={() => active = !active}>Toggle</button>

<div 
    transition:slide
    class:hidden={!active}
>           
    <DisplayResult getResultFn={() => getResults(idx)} {active} />
</div>

<style>
.hidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, height 0.3s ease;
}
</style>

这两种方案都能满足：

• 初始仅在组件可见时加载数据
• 切换显示/隐藏时不会重复请求，复用缓存结果
• 支持过渡动画
• 仅在异步逻辑变化时才会重新请求数据

内容的提问来源于stack exchange，提问作者Will Epperson