面试题：Svelte Props深度剖析与优化：复杂场景下的通信难题

Question

假设在一个大型Svelte项目中，存在多层嵌套组件，需要从顶层组件通过Props向深层子组件传递数据。但传递过程中，中间层部分组件并不需要该数据，却会因Prop传递导致不必要的更新。请提出一种优化方案，既能高效传递数据，又能避免中间层组件的不必要更新，详细阐述思路并给出核心代码示例。

Answer 1

思路

1. Context API：Svelte 提供了 setContext 和 getContext 方法来实现跨组件数据共享。顶层组件使用 setContext 设置数据，深层子组件使用 getContext 获取数据，这样中间层组件就无需传递数据，也就不会因数据传递而导致不必要的更新。
2. Store：可以利用 Svelte 的响应式存储（Store）。顶层组件更新存储中的数据，深层子组件订阅存储，中间层组件不涉及数据传递，从而避免不必要更新。

使用 Context API 的核心代码示例

1. 顶层组件（App.svelte）

<script>
    import { setContext } from'svelte';
    const sharedData = 'Some important data';
    setContext('sharedDataContext', sharedData);
</script>

{#if false}
    <!-- 这里放其他顶层组件的内容，不影响 context 设置 -->
{/if}

2. 深层子组件（DeepChild.svelte）

<script>
    import { getContext } from'svelte';
    const sharedData = getContext('sharedDataContext');
</script>

<p>{sharedData}</p>

使用 Store 的核心代码示例

1. 创建 Store（store.js）

import { writable } from'svelte/store';

export const sharedDataStore = writable('Some important data');

2. 顶层组件（App.svelte）

<script>
    import { sharedDataStore } from './store.js';
    const newData = 'Updated data';
    sharedDataStore.set(newData);
</script>

{#if false}
    <!-- 这里放其他顶层组件的内容，不影响 store 更新 -->
{/if}

3. 深层子组件（DeepChild.svelte）

<script>
    import { sharedDataStore } from './store.js';
    let data;
    sharedDataStore.subscribe((value) => {
        data = value;
    });
</script>

<p>{data}</p>