面试题：Qwik状态管理下useContext和createContext的复杂场景应用与架构设计

整体架构思路

多语言切换：创建一个LanguageContext，使用createContext生成上下文对象，在顶层组件提供该上下文。上下文状态存储当前选择的语言，通过useContext在需要语言切换的组件中获取状态和修改语言的方法。
用户权限管理：设计PermissionContext，存储用户的权限信息，如是否是管理员、可访问的功能模块等。同样在顶层提供，各功能组件依据权限决定是否展示某些内容或提供某些操作。
动态主题切换：建立ThemeContext，存储当前主题（如亮色、暗色）相关信息。顶层提供该上下文，各组件通过获取此上下文来应用相应主题样式。

各模块间通过上下文交互

提供上下文：在应用的顶层组件（如App组件）中，使用Provider为每个上下文提供初始状态和修改状态的方法。例如：

import { LanguageContext } from './LanguageContext';
import { PermissionContext } from './PermissionContext';
import { ThemeContext } from './ThemeContext';

function App() {
  const [language, setLanguage] = useState('en');
  const [permissions, setPermissions] = useState({ isAdmin: false });
  const [theme, setTheme] = useState('light');

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      <PermissionContext.Provider value={{ permissions, setPermissions }}>
        <ThemeContext.Provider value={{ theme, setTheme }}>
          {/* 应用的其他组件 */}
        </ThemeContext.Provider>
      </PermissionContext.Provider>
    </LanguageContext.Provider>
  );
}

消费上下文：在需要相应功能的子组件中，使用useContext获取上下文数据。如在一个需要根据语言切换文本的组件中：

import { LanguageContext } from './LanguageContext';

function MyComponent() {
  const { language } = useContext(LanguageContext);
  // 根据language进行文本切换逻辑
  return <div>{language === 'en'? 'Hello' : '你好'}</div>;
}

确保状态变化的一致性和可追溯性

单一数据源：通过上下文在顶层维护状态，所有状态变化都基于顶层提供的状态和修改方法，避免状态在不同组件中孤立变化。
日志记录：在修改状态的方法中添加日志记录，例如使用console.log或专业的日志库记录状态变化的时间、原因等信息。例如：

function App() {
  const [language, setLanguage] = useState('en');
  const customSetLanguage = (newLanguage) => {
    console.log(`Changing language from ${language} to ${newLanguage} at ${new Date()}`);
    setLanguage(newLanguage);
  };

  return (
    <LanguageContext.Provider value={{ language, setLanguage: customSetLanguage }}>
      {/* 其他组件 */}
    </LanguageContext.Provider>
  );
}

处理不同功能模块间可能存在的状态冲突

命名规范：确保不同上下文的状态和方法命名清晰，避免命名冲突。例如，LanguageContext中的状态变量命名为language，ThemeContext中的状态变量命名为theme。
状态隔离：每个上下文专注于自己的功能模块，尽量减少不同上下文状态之间的直接依赖。如果确实需要依赖，通过顶层组件进行协调。例如，如果主题切换需要根据用户权限进行限制，在顶层App组件中处理：

function App() {
  const [language, setLanguage] = useState('en');
  const [permissions, setPermissions] = useState({ isAdmin: false });
  const [theme, setTheme] = useState('light');

  const canChangeTheme = permissions.isAdmin;
  const customSetTheme = (newTheme) => {
    if (canChangeTheme) {
      setTheme(newTheme);
    }
  };

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      <PermissionContext.Provider value={{ permissions, setPermissions }}>
        <ThemeContext.Provider value={{ theme, setTheme: customSetTheme }}>
          {/* 应用的其他组件 */}
        </ThemeContext.Provider>
      </PermissionContext.Provider>
    </LanguageContext.Provider>
  );
}

星途面试题库

面试题：Qwik状态管理下useContext和createContext的复杂场景应用与架构设计

知识考点

面试题答案

整体架构思路

各模块间通过上下文交互

确保状态变化的一致性和可追溯性

处理不同功能模块间可能存在的状态冲突