面试题：Qwik中useContext状态管理的基础原理及应用场景

useContext基本工作原理

在Qwik中，useContext用于跨组件层级传递数据，而无需在每个层级手动传递props。它依赖于上下文（Context）对象，该对象由createContext创建。当一个组件使用useContext时，它会订阅最近的上层提供的上下文。如果上下文的值发生变化，使用useContext的组件会重新渲染。这使得共享数据可以在组件树中高效地向下传递，而不必通过中间组件层层传递。

适合使用useContext进行状态管理的应用场景

用户认证状态管理：
- 应用场景：在一个多页面的Web应用中，不同页面组件可能需要知道用户是否已登录以及用户的基本信息，如用户名等。例如，导航栏组件可能需要根据用户登录状态显示不同的按钮（“登录”或“注销”），而内容页面组件可能需要根据用户信息显示个性化的欢迎消息。
- 示例代码：

import { component$, createContext, useContext } from '@builder.io/qwik';

// 创建上下文
const AuthContext = createContext<{ isLoggedIn: boolean; username: string | null }>({
  isLoggedIn: false,
  username: null
});

const Navbar = component$(() => {
  const auth = useContext(AuthContext);
  return (
    <nav>
      {auth.isLoggedIn ? (
        <button>Logout</button>
      ) : (
        <button>Login</button>
      )}
    </nav>
  );
});

const ContentPage = component$(() => {
  const auth = useContext(AuthContext);
  return (
    <div>
      {auth.isLoggedIn && <p>Welcome, {auth.username}</p>}
    </div>
  );
});

const App = component$(() => {
  // 模拟登录状态改变
  const [isLoggedIn, setIsLoggedIn] = useState$(false);
  const [username, setUsername] = useState$(null);

  const handleLogin = () => {
    setIsLoggedIn(true);
    setUsername('JohnDoe');
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, username }}>
      <Navbar />
      <ContentPage />
      <button onClick={handleLogin}>模拟登录</button>
    </AuthContext.Provider>
  );
});

主题切换：
- 应用场景：一个允许用户切换主题（如深色模式和浅色模式）的应用。不同的组件，如按钮、文本、背景等，都需要根据当前主题显示相应的样式。通过useContext可以方便地将主题状态传递到各个组件，而无需在每个组件间传递props。
- 示例代码：

import { component$, createContext, useContext, useState$ } from '@builder.io/qwik';

// 创建主题上下文
const ThemeContext = createContext<'light' | 'dark'>('light');

const Button = component$(() => {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ backgroundColor: theme === 'light'? 'white' : 'black', color: theme === 'light'? 'black' : 'white' }}>
      Click me
    </button>
  );
});

const App = component$(() => {
  const [theme, setTheme] = useState$<'light' | 'dark'>('light');

  const toggleTheme = () => {
    setTheme(theme === 'light'? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={theme}>
      <Button />
      <button onClick={toggleTheme}>切换主题</button>
    </ThemeContext.Provider>
  );
});

星途面试题库

面试题：Qwik中useContext状态管理的基础原理及应用场景

知识考点

面试题答案

useContext基本工作原理

适合使用useContext进行状态管理的应用场景