面试题：React高阶组件条件渲染与复杂业务逻辑的融合

1. 状态管理

在这个场景中，我们可以使用React的上下文（Context）来管理用户登录状态和会员等级，这样可以方便地在整个应用中共享这些状态。对于商品库存情况，我们可以将其作为商品数据的一部分进行管理。

2. 条件判断逻辑

登录状态判断：判断用户是否登录，以决定展示哪些商品列表。
会员等级判断：根据不同的会员等级，应用不同的商品展示策略。
库存判断：对于库存不足的商品，应用特殊的显示样式。

3. 与其他业务模块的交互

高阶组件需要从用户管理模块获取登录状态和会员等级信息，从商品管理模块获取商品列表及库存信息。

核心代码示例

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

// 创建上下文
const UserContext = createContext();

// 用户状态管理组件
const UserProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [memberLevel, setMemberLevel] = useState('普通会员');

  // 模拟从后端获取用户信息
  useEffect(() => {
    // 这里可以是异步请求获取用户信息
    setIsLoggedIn(true);
    setMemberLevel('高级会员');
  }, []);

  return (
    <UserContext.Provider value={{ isLoggedIn, memberLevel }}>
      {children}
    </UserContext.Provider>
  );
};

// 高阶组件
const withConditionalRender = (WrappedComponent) => {
  return (props) => {
    const { isLoggedIn, memberLevel } = useContext(UserContext);
    const products = props.products;

    // 处理商品列表根据登录状态和会员等级
    const filteredProducts = isLoggedIn ? products : products.filter(product => product.isPublic);

    const handleStock = (product) => {
      if (product.stock < 10) {
        return { ...product, specialDisplay: true };
      }
      return product;
    };

    const finalProducts = filteredProducts.map(handleStock);

    return (
      <WrappedComponent
        {...props}
        products={finalProducts}
      />
    );
  };
};

// 商品列表组件
const ProductList = ({ products }) => {
  return (
    <div>
      {products.map(product => (
        <div key={product.id} style={product.specialDisplay ? { color: 'red' } : {}}>
          {product.name} - {product.price}
        </div>
      ))}
    </div>
  );
};

// 包装后的商品列表组件
const ConditionalProductList = withConditionalRender(ProductList);

// 应用
const App = () => {
  const products = [
    { id: 1, name: '商品1', price: 100, stock: 5, isPublic: true },
    { id: 2, name: '商品2', price: 200, stock: 15, isPublic: false },
    { id: 3, name: '商品3', price: 300, stock: 8, isPublic: true }
  ];

  return (
    <UserProvider>
      <ConditionalProductList products={products} />
    </UserProvider>
  );
};

export default App;

上述代码通过React上下文管理用户状态，高阶组件withConditionalRender处理条件渲染逻辑，包括登录状态、会员等级和库存情况。商品列表组件ProductList根据处理后的商品列表进行展示。App组件提供商品数据并应用上下文和高阶组件。

星途面试题库

面试题：React高阶组件条件渲染与复杂业务逻辑的融合

知识考点

面试题答案

1. 状态管理

2. 条件判断逻辑

3. 与其他业务模块的交互

核心代码示例