面试题：Svelte组件状态管理之中等难度：上下文与存储的基础应用

Question

在Svelte中，简述如何使用上下文（context）来在组件树中传递状态。请举例说明一个父子组件间通过上下文共享数据的场景，并写出相应代码。同时，对比一下使用上下文和使用props传递数据的优缺点。

Answer 1

在Svelte中使用上下文传递状态的方式

Svelte提供了setContext和getContext函数来在组件树中传递状态。setContext用于在父组件中设置上下文数据，getContext用于在子组件或后代组件中获取该上下文数据。

父子组件间通过上下文共享数据的场景及代码示例

假设我们有一个App组件作为父组件，包含一个Child组件作为子组件，我们要通过上下文在它们之间共享一个名为message的数据。

1. 创建App.svelte组件

<script>
    import Child from './Child.svelte';
    import { setContext } from'svelte';

    const message = 'Hello from parent';
    setContext('messageContext', message);
</script>

<Child />

2. 创建Child.svelte组件

<script>
    import { getContext } from'svelte';

    const message = getContext('messageContext');
</script>

<p>{message}</p>

使用上下文和使用props传递数据的优缺点

使用上下文的优点

1. 便捷性：对于深层嵌套组件，无需逐层传递数据，减少了props在中间组件的冗余传递。
2. 灵活性：可以在组件树的任意层级获取数据，更适合全局或跨层级共享状态。

使用上下文的缺点

1. 可维护性：数据流向不直观，难以追踪数据来源和变化，增加调试难度。
2. 滥用风险：可能导致过度使用，破坏组件的封装性，使组件之间耦合度变高。

使用props传递数据的优点

1. 数据流向清晰：数据从父组件流向子组件，易于理解和维护。
2. 组件独立性：增强组件的独立性和可复用性，每个组件只关心自己接收的props。

使用props传递数据的缺点

1. 嵌套传递繁琐：对于深层嵌套组件，需要逐层传递props，代码冗长且易出错。
2. 灵活性受限：只能在父子组件之间传递数据，不适用于跨层级共享状态。