面试题：Qwik中如何通过createContext构建简单的上下文环境

Question

请描述在Qwik项目里，使用createContext构建一个简单上下文环境的步骤，例如传递用户登录状态信息。并给出关键代码示例。

Answer 1

1. 安装依赖： 在Qwik项目中，确保已经安装了Qwik相关依赖。如果是新创建的项目，可以使用npm create qwik@latest来初始化项目。
2. 创建上下文： 使用createContext函数来创建上下文对象。在Qwik中，createContext来自@builder.io/qwik库。 示例代码如下：

   import { createContext } from '@builder.io/qwik';
   
   // 创建用户登录状态上下文
   const UserLoginContext = createContext<{ isLoggedIn: boolean } | null>(null);
   

3. 提供上下文： 在需要传递用户登录状态信息的组件树的上层组件中，使用useContextProvider来提供上下文。

   import { component$, useContextProvider } from '@builder.io/qwik';
   
   const App = component$(() => {
     const userLoginState = { isLoggedIn: true };
     useContextProvider(UserLoginContext, userLoginState);
   
     return (
       <div>
         {/* 组件树内容 */}
       </div>
     );
   });
   

4. 消费上下文： 在需要获取用户登录状态信息的子组件中，使用useContext来消费上下文。

   import { component$, useContext } from '@builder.io/qwik';
   
   const ChildComponent = component$(() => {
     const userLoginState = useContext(UserLoginContext);
   
     return (
       <div>
         {userLoginState?.isLoggedIn ? '用户已登录' : '用户未登录'}
       </div>
     );
   });