面试题：Svelte组件状态管理与复杂生命周期场景结合

Question

假设有一个具有分页功能的列表组件，数据通过API获取。在Svelte中，如何合理运用生命周期函数（如`onDestroy`等）来处理分页切换时的数据加载、缓存以及防止内存泄漏问题？请详细阐述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 数据加载与缓存：
   • 使用一个变量来存储当前页码currentPage，每次切换页码时，判断缓存中是否已有该页数据。如果有，则直接使用缓存数据；如果没有，则通过API获取数据。
   • 可以使用一个对象作为缓存，键为页码，值为对应页的数据。
2. 防止内存泄漏：
   • 在Svelte组件销毁时，取消尚未完成的API请求，防止组件销毁后仍在后台处理请求，从而导致内存泄漏。这可以通过onDestroy生命周期函数来实现。

关键代码片段

<script>
    import { onDestroy } from'svelte';
    let currentPage = 1;
    const dataCache = {};
    let data = [];
    let isLoading = false;
    let abortController;

    const fetchData = async (page) => {
        if (dataCache[page]) {
            data = dataCache[page];
            return;
        }
        isLoading = true;
        abortController = new AbortController();
        const signal = abortController.signal;
        try {
            const response = await fetch(`your-api-url?page=${page}`, { signal });
            const result = await response.json();
            data = result.data;
            dataCache[page] = data;
        } catch (error) {
            if (!(error.name === 'AbortError')) {
                console.error('Error fetching data:', error);
            }
        } finally {
            isLoading = false;
        }
    };

    const changePage = (newPage) => {
        currentPage = newPage;
        fetchData(currentPage);
    };

    onDestroy(() => {
        abortController && abortController.abort();
    });
</script>

{#if isLoading}
    Loading...
{:else}
    <ul>
        {#each data as item}
            <li>{item}</li>
        {/each}
    </ul>
    <button on:click={() => changePage(currentPage - 1)} disabled={currentPage === 1}>Previous</button>
    <button on:click={() => changePage(currentPage + 1)}>Next</button>
{/if}

在上述代码中：

• fetchData函数负责从API获取数据，先检查缓存，没有则发起请求，并处理缓存和加载状态。
• changePage函数用于切换页码并触发数据加载。
• onDestroy函数在组件销毁时取消尚未完成的API请求，避免内存泄漏。