React项目推荐商品API调用卡顿，寻求性能优化方案

先定位问题根源 #

• 打开浏览器DevTools的Network面板，查看推荐API的请求耗时：
  • 如果请求本身耗时超过1s，问题出在后端接口/网络层面，和前端组件嵌套、本地逻辑无关，直接找后端优化接口即可。
  • 如果请求耗时很短（<300ms）但页面推荐区域加载慢，再排查前端的随机数生成、筛选逻辑或组件渲染问题。

针对API请求慢的优化 #

• 并行发起请求：确保商品详情和推荐API同时发起，不要等详情接口返回再调用推荐，避免串行请求拖慢整体速度。示例：

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        // 用Promise.all并行执行两个请求
        const [detailRes, recommendRes] = await Promise.all([
          fetch(`/api/products/${productId}`),
          fetch(`/api/recommended?exclude=${productId}`) // 让后端直接返回排除当前商品的结果
        ]);
        setProduct(await detailRes.json());
        setRecommended(await recommendRes.json());
      } catch (err) {
        console.error('请求失败:', err);
      }
    };
    fetchAllData();
  }, [productId]);
  

• 缓存推荐结果：如果推荐商品不需要实时更新，用localStorage或React的useMemo存储结果，相同商品页再次进入时直接读取缓存，避免重复请求。
• 懒加载推荐组件：等页面核心内容（商品详情）渲染完成后，再加载推荐模块，优先保证核心体验。示例：

  useEffect(() => {
    // 延迟1s发起推荐请求，让页面先渲染核心内容
    const timer = setTimeout(async () => {
      const res = await fetch(`/api/recommended?exclude=${productId}`);
      setRecommended(await res.json());
    }, 1000);
    return () => clearTimeout(timer);
  }, [productId]);
  

针对前端逻辑（随机数/筛选）慢的优化 #

• 把筛选逻辑移到后端：让推荐API直接返回排除当前商品ID的随机商品，不要在前端生成随机ID再筛选——前端循环生成符合条件的ID很容易因为循环次数过多导致卡顿。
• 优化随机数生成逻辑：如果必须在前端生成，用Set来避免重复ID，提升判断效率：

  // 生成不重复且排除当前ID的随机ID数组
  const generateRecommendIds = (currentId, count) => {
    const idSet = new Set();
    // 假设商品ID范围是1-1000，可根据实际调整
    while (idSet.size < count) {
      const randomId = Math.floor(Math.random() * 1000) + 1;
      if (randomId !== currentId) idSet.add(randomId);
    }
    return Array.from(idSet);
  };
  // 用useMemo缓存结果，避免每次渲染都重新生成
  const recommendIds = useMemo(() => generateRecommendIds(productId, 4), [productId]);
  

• 避免不必要的重渲染：用React.memo包裹Recommended组件，防止父组件更新时无意义的重渲染：

  const Recommended = React.memo(({ products }) => {
    // 组件内容
  });
  

关于组件嵌套的说明 #

组件嵌套本身不会导致API请求变慢，除非你的推荐API请求是依赖商品详情的状态才发起（比如等商品详情加载完成后才调用）。只要推荐组件的请求是在自身挂载时就发起（不依赖父组件的非必要状态），嵌套结构就不会有问题。

内容的提问来源于stack exchange，提问作者user20047387