面试题：Svelte中Context API与Props的基础差异

Question

请简要阐述Svelte中Context API和Props在数据传递方式上的主要区别，并举例说明在父子组件简单数据传递场景下，为何Props是更常见的选择。

Answer 1

主要区别

1. 传递方向
   • Props：是单向传递，即从父组件传递到子组件。父组件决定传递给子组件的数据，子组件只能接收和使用，不能直接修改父组件通过Props传递的数据。
   • Context API：它打破了组件树的层级限制，可以在祖先组件和后代组件之间共享数据，不一定是直接父子关系。它在组件树中自上而下传递数据，但后代组件可以修改共享的数据。
2. 使用场景
   • Props：适用于简单的父子组件之间的数据传递，清晰明确地将数据从父组件给到子组件，常用于传递特定于该子组件的数据。
   • Context API：适合传递一些需要在多个层级的组件中共享的数据，如全局配置、用户认证信息等，避免在中间层级的组件中反复传递Props。

父子组件简单数据传递场景Props更常见的原因

在父子组件简单数据传递场景下，Props更常见是因为它的单向数据流特性使得数据传递清晰明了，易于理解和调试。每个子组件的数据来源一目了然，就是父组件传递过来的Props。例如：

<!-- 父组件 -->
<script>
    let message = 'Hello from parent';
</script>

<ChildComponent {message} />

<!-- 子组件 -->
<script>
    export let message;
</script>

<p>{message}</p>

这里通过Props将父组件中的message传递给子组件，代码简洁，逻辑清晰。而使用Context API会引入不必要的复杂性，因为Context API主要解决跨层级传递数据的问题，对于简单的父子组件传递数据，Props足以满足需求且更符合直观的代码逻辑。