面试题：Svelte模块上下文的作用域及数据传递优化

思路：
- 利用Svelte的响应式系统来自动追踪依赖。Svelte会自动追踪组件中对响应式数据的读取，当数据变化时，自动更新相关组件。
- 对于共享数据，使用Svelte的上下文（context）机制。将共享数据放在父组件的上下文中，子组件通过获取上下文来使用数据，这样可以实现数据的共享。
- 为了避免不必要的渲染，合理使用 {#if} 块或者 {#each} 块。例如，在 {#if} 块中，可以根据某些条件来决定是否渲染组件，当条件不变时，组件不会重新渲染。
可能用到的Svelte特性：
- 响应式声明：
  - 在Svelte中，可以使用 let 声明响应式变量，例如 let count = 0;。当 count 变化时，依赖它的组件部分会自动更新。对于module上下文的数据，可以将其定义为响应式变量。比如在一个模块中：

// module.js
export let sharedData = { value: 0 };
$: sharedData.value++; // 响应式更新

上下文API：
- 在父组件中，可以使用 setContext 来设置上下文数据。

// Parent.svelte
<script>
    import { setContext } from'svelte';
    import { sharedData } from './module.js';
    setContext('sharedDataContext', sharedData);
</script>
{#each Array.from({ length: 3 }) as _, i}
    <ChildComponent {i}/>
{/each}

 - 子组件中使用 `getContext` 来获取上下文数据。

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

阻止不必要渲染：
- {#if} 块：假设子组件中有一些部分只在特定条件下需要渲染，例如只有当 sharedData.value 大于10时才渲染某个 <div>。

// ChildComponent.svelte
<script>
    import { getContext } from'svelte';
    const sharedData = getContext('sharedDataContext');
</script>
{#if sharedData.value > 10}
    <div>Special content when value is greater than 10</div>
{/if}

 - **`{#each}` 块**：如果子组件中有列表渲染，并且希望在列表数据结构不变时避免重新渲染，可以利用 `{#each}` 的 `track` 功能。假设 `sharedData` 中有一个数组，并且数组元素有唯一标识 `id`。

// ChildComponent.svelte
<script>
    import { getContext } from'svelte';
    const sharedData = getContext('sharedDataContext');
</script>
{#each sharedData.array as item (item.id)}
    <div>{item.name}</div>
{/each}

这样，只有当 item.id 对应的 item 数据变化时，相关 <div> 才会重新渲染，而不是整个列表重新渲染。

星途面试题库

面试题：Svelte模块上下文的作用域及数据传递优化

知识考点

面试题答案