面试题：Svelte状态管理下跨组件状态传递的最佳实践及避免的错误

实现高效跨组件状态传递的最佳实践

Context API
- 原理：Svelte提供了 setContext 和 getContext 函数。setContext 在父组件中设置一个键值对形式的上下文数据，任何层级的子组件都可以通过 getContext 来获取该数据。
- 示例：
  - 在父组件中：

<script>
    import { setContext } from'svelte';
    const sharedValue = 'Hello from parent';
    setContext('sharedKey', sharedValue);
</script>
{#if false}
    <!-- 这只是为了让子组件挂载 -->
    <ChildComponent />
{/if}

 - 在子组件中：

<script>
    import { getContext } from'svelte';
    const sharedValue = getContext('sharedKey');
</script>
<p>{sharedValue}</p>

优点：适用于深层嵌套组件之间共享状态，无需通过多层组件传递props。

Store
- 原理：Svelte stores 是一种响应式数据存储机制。可以创建一个可读写的store，不同组件可以订阅和修改这个store的值。
- 示例：
  - 创建一个store（例如在 stores.js 文件中）：

import { writable } from'svelte/store';
export const sharedStore = writable('Initial value');

 - 在组件中使用：

<script>
    import { sharedStore } from './stores.js';
    let value;
    sharedStore.subscribe((newValue) => {
        value = newValue;
    });
    function updateStore() {
        sharedStore.update((oldValue) => oldValue + ' updated');
    }
</script>
<p>{value}</p>
<button on:click={updateStore}>Update store</button>

优点：实现了单向数据流，便于状态管理和调试，适合多个兄弟组件或非直接父子关系组件间共享状态。

Event Emitter Pattern (Custom Events)
- 原理：通过 createEventDispatcher 来创建一个事件分发器，在子组件中可以触发自定义事件，父组件监听这些事件来接收数据。如果需要反向传递状态，父组件可以将更新状态的函数作为prop传递给子组件。
- 示例：
  - 子组件：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function sendData() {
        dispatch('custom - event', { data: 'Hello from child' });
    }
</script>
<button on:click={sendData}>Send data</button>

 - 父组件：

<script>
    function handleCustomEvent(event) {
        console.log(event.detail.data);
    }
</script>
<ChildComponent on:custom - event={handleCustomEvent} />

优点：适用于组件间松散耦合的通信，特别是当子组件需要通知父组件某些状态变化时。

容易出现的错误及避免方法

Context API相关错误
- 错误：
  - 键冲突：如果在不同的地方使用相同的键来设置上下文，会导致数据混乱。
  - 未正确处理无上下文情况：在子组件中调用 getContext 时，如果没有对应的上下文设置，会抛出错误。
- 避免方法：
  - 使用唯一的键，例如使用模块名或组件名作为前缀。
  - 在调用 getContext 时，可以使用一个默认值来避免错误，例如 const value = getContext('key', 'default value');。
Store相关错误
- 错误：
  - 意外的状态更新：如果多个地方同时对store进行更新，可能导致不可预测的状态变化。
  - 未正确订阅：组件可能没有正确订阅store的变化，导致状态更新时组件未重新渲染。
- 避免方法：
  - 遵循单向数据流原则，集中管理store的更新逻辑。
  - 确保在组件的生命周期内正确订阅和取消订阅store（Svelte会自动处理大部分情况，但在一些复杂场景下需要注意）。
Event Emitter Pattern相关错误
- 错误：
  - 事件名冲突：如果不同组件使用相同的事件名，可能导致意外的事件触发。
  - 未正确传递数据：在事件触发时，传递的数据格式可能不符合接收方的预期。
- 避免方法：
  - 使用唯一的事件名，同样可以使用组件名等作为前缀。
  - 在文档或代码注释中明确事件传递的数据结构，并且在触发和接收事件的地方进行数据验证。

星途面试题库

面试题：Svelte状态管理下跨组件状态传递的最佳实践及避免的错误

知识考点

面试题答案

实现高效跨组件状态传递的最佳实践

容易出现的错误及避免方法