面试题：Qwik中createContext在全局状态管理里如何解决跨组件数据传递问题

1. 在Qwik应用中使用createContext实现不相邻组件间数据传递

创建上下文：
- 首先，在Qwik应用中，使用createContext函数创建一个上下文对象。例如：
```
import { createContext } from '@builder.io/qwik';
const MyContext = createContext<{ someData: string }>({ someData: '' });
```
这里创建了一个MyContext上下文，其类型定义为包含一个someData字符串属性的对象，并初始化为空字符串。

提供上下文：

在应用树中较高层次的组件中，使用MyContext.Provider组件来包裹需要访问该上下文数据的组件树部分。例如：

import { component$, useContext } from '@builder.io/qwik';
import { MyContext } from './MyContext';
const ParentComponent = component$(() => {
  const contextValue = { someData: 'Hello, world!' };
  return (
    <MyContext.Provider value={contextValue}>
      {/* 子组件树 */}
    </MyContext.Provider>
  );
});

这里在ParentComponent中，通过MyContext.Provider的value属性提供了上下文数据{ someData: 'Hello, world!' }。

消费上下文：

在不相邻的子组件中，使用useContext钩子来获取上下文数据。例如：

import { component$, useContext } from '@builder.io/qwik';
import { MyContext } from './MyContext';
const ChildComponent = component$(() => {
  const context = useContext(MyContext);
  return <div>{context.someData}</div>;
});

这样，ChildComponent就可以获取到MyContext中传递的数据，即使它与提供上下文的组件不相邻。

2. 相较于props drilling的优势

减少冗余代码：
- props drilling：在props drilling方式中，如果有多层嵌套组件，需要从顶层组件逐层向下传递数据，每一层组件都需要添加相应的props，这会导致大量冗余代码。例如，如果有组件A -> B -> C -> D，A要传递数据到D，B和C都需要声明并传递这个props，即使它们本身并不使用这个数据。
- createContext：使用createContext，数据可以直接从提供上下文的组件传递到需要的组件，无需中间组件层层传递，大大减少了冗余代码。
提高可维护性：
- props drilling：当数据传递路径复杂或者数据结构发生变化时，props drilling方式需要在多个组件中修改代码来更新props传递，这使得维护变得困难。
- createContext：使用createContext，只需要在上下文的提供和消费处修改代码，对于中间组件无需改动，提高了代码的可维护性。
数据共享方便：
- props drilling：props drilling更适合于父子组件间明确的数据传递，对于不相邻组件间数据共享不太方便，需要复杂的多层传递。
- createContext：createContext专为不相邻组件间数据共享设计，只要在同一个上下文提供的组件树内，任何组件都可以方便地获取和使用上下文数据，更适合全局状态管理场景。

星途面试题库

面试题：Qwik中createContext在全局状态管理里如何解决跨组件数据传递问题

知识考点

面试题答案

1. 在Qwik应用中使用createContext实现不相邻组件间数据传递

2. 相较于props drilling的优势