面试题：Qwik组件Props与State在复杂业务场景下的架构设计

1. 组件架构设计

顶层组件（如 App）：负责整体应用的初始化，引入其他核心模块，如推荐系统模块、用户登录模块，并管理全局状态（如用户登录状态）。
商品展示组件（ProductDisplay）：接收 props 确定展示的商品类别及筛选条件，内部管理商品加载状态、用户交互状态。同时，通过回调函数与顶层组件或其他模块进行交互。
推荐系统模块（RecommendationSystem）：作为一个独立模块，根据用户行为和商品数据生成推荐商品列表，提供接口供商品展示组件获取推荐信息。
用户登录模块（UserLogin）：管理用户登录相关逻辑和状态，提供接口供商品展示组件判断用户登录状态，以决定是否显示某些交互功能（如加入购物车、收藏）。

2. 组件间数据流动

从顶层组件到商品展示组件：顶层组件通过 props 传递商品类别、筛选条件等数据给商品展示组件。例如：

<ProductDisplay 
  category={props.category} 
  filters={props.filters} 
  onCartAdd={handleCartAdd} 
  onFavorite={handleFavorite}
/>

商品展示组件与推荐系统模块：商品展示组件在需要推荐商品时，调用推荐系统模块的接口获取推荐列表。推荐系统模块将推荐数据返回给商品展示组件。例如：

// ProductDisplay 组件内
import { getRecommendations } from './RecommendationSystem';
const recommendations = getRecommendations();

商品展示组件与用户登录模块：商品展示组件调用用户登录模块的接口获取用户登录状态，以决定是否显示加入购物车、收藏等按钮。例如：

// ProductDisplay 组件内
import { isLoggedIn } from './UserLogin';
const isUserLoggedIn = isLoggedIn();

3. 状态管理

商品展示组件内部状态：使用 useState 或 useReducer 管理商品加载状态（如 loading: boolean）、用户交互状态（如 isAddedToCart: boolean, isFavorite: boolean）。例如：

import React, { useState } from'react';
const ProductDisplay = (props) => {
  const [loading, setLoading] = useState(true);
  const [isAddedToCart, setIsAddedToCart] = useState(false);
  const [isFavorite, setIsFavorite] = useState(false);

  // 加载商品数据后设置 loading 为 false
  useEffect(() => {
    // 模拟异步加载
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    // 组件渲染逻辑
  );
};

全局状态（在顶层组件管理）：使用 useContext 或状态管理库（如 Redux）管理全局状态，如用户登录状态。例如，使用 useContext：

import React, { createContext, useState, useEffect } from'react';

const UserContext = createContext();

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // 模拟从本地存储读取登录状态
    const storedLoggedIn = localStorage.getItem('isLoggedIn');
    if (storedLoggedIn) {
      setIsLoggedIn(true);
    }
  }, []);

  return (
    <UserContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      {/* 其他组件 */}
    </UserContext.Provider>
  );
};

export { UserContext };

4. 交互机制

用户交互（在商品展示组件）：当用户点击加入购物车、收藏等按钮时，商品展示组件更新内部状态，并通过回调函数通知顶层组件或相关模块。例如：

const ProductDisplay = (props) => {
  const [isAddedToCart, setIsAddedToCart] = useState(false);

  const handleCartAdd = () => {
    setIsAddedToCart(true);
    props.onCartAdd();
  };

  return (
    <button onClick={handleCartAdd}>
      {isAddedToCart? '已加入购物车' : '加入购物车'}
    </button>
  );
};

模块间交互：商品展示组件与推荐系统模块、用户登录模块通过接口调用进行交互。推荐系统模块根据商品展示组件的请求提供推荐数据，用户登录模块为商品展示组件提供用户登录状态。例如，推荐系统模块：

const getRecommendations = () => {
  // 模拟推荐逻辑
  return ['推荐商品1', '推荐商品2'];
};

export { getRecommendations };

用户登录模块：

const isLoggedIn = () => {
  // 模拟检查登录状态逻辑
  return localStorage.getItem('isLoggedIn') === 'true';
};

export { isLoggedIn };

通过以上设计，能够满足大型电商 Qwik 应用中商品展示组件在可扩展性、维护性及性能方面的要求。

星途面试题库

面试题：Qwik组件Props与State在复杂业务场景下的架构设计

知识考点

面试题答案

1. 组件架构设计

2. 组件间数据流动

3. 状态管理

4. 交互机制