面试题：Svelte中Context API在组件树数据共享的基础应用

Question

在Svelte中，假设你有一个父组件Parent和两个子组件Child1、Child2，使用Context API实现父组件向这两个子组件共享一个字符串数据 'Hello, Svelte'，请写出关键代码片段，并解释setContext和getContext的作用。

Answer 1

父组件 Parent.svelte

<script>
    import { setContext } from'svelte';
    const sharedData = 'Hello, Svelte';
    setContext('sharedDataContext', sharedData);
</script>

<Child1 />
<Child2 />

子组件 Child1.svelte

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

<p>{sharedData}</p>

子组件 Child2.svelte

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

<p>{sharedData}</p>

setContext 和 getContext 的作用解释

• setContext：
  • 作用：用于在父组件中设置上下文数据。它接受两个参数，第一个参数是上下文的唯一标识符（这里是 'sharedDataContext'），第二个参数是要共享的数据（这里是 sharedData）。通过 setContext，父组件可以将数据传递给后代组件，而无需通过层层传递props。
  • 使用场景：当多个后代组件需要访问同一个数据，而这些组件在组件树中的层级较深，通过props传递数据变得繁琐时，setContext 就很有用。
• getContext：
  • 作用：用于在子组件或后代组件中获取由 setContext 设置的上下文数据。它接受一个参数，即上下文的唯一标识符。子组件调用 getContext 并传入与父组件 setContext 中相同的标识符，就可以获取到共享的数据。
  • 使用场景：当子组件需要使用父组件共享的数据，且不想通过props接收时，可以使用 getContext 从上下文获取数据。