复杂交互场景Hook调优

在复杂交互场景中，React Hooks的滥用往往导致性能瓶颈和逻辑混乱。本文将通过一个真实的电商购物车场景，展示如何通过Hook重构实现性能优化。

问题场景描述：某电商平台的购物车组件需要同时处理商品选择、数量变更、价格计算、优惠券应用等多个交互逻辑。初始版本使用多个独立的useState和useEffect，导致组件渲染频繁，数据同步复杂。

重构方案：

自定义Hook聚合状态：将商品选择、数量变更等逻辑封装为useCartItems Hook，通过单一状态管理所有商品信息

const useCartItems = () => {
  const [items, setItems] = useState([]);
  
  const updateQuantity = useCallback((id, quantity) => {
    setItems(prev => prev.map(item => 
      item.id === id ? {...item, quantity} : item
    ));
  }, []);
  
  const toggleSelect = useCallback((id) => {
    setItems(prev => prev.map(item => 
      item.id === id ? {...item, selected: !item.selected} : item
    ));
  }, []);
  
  return { items, updateQuantity, toggleSelect };
};

性能优化策略：使用useMemo缓存计算结果，避免重复计算

const useCartSummary = (items) => {
  return useMemo(() => {
    const total = items.reduce((sum, item) => 
      sum + (item.selected ? item.price * item.quantity : 0), 0);
    const selectedCount = items.filter(item => item.selected).length;
    return { total, selectedCount };
  }, [items]);
};

可复现步骤：

创建包含100+商品的购物车组件
模拟用户频繁点击选择、修改数量等操作
使用React DevTools监控组件渲染次数
应用上述Hook重构后，观察渲染次数显著减少

这种重构方案将原本分散的逻辑集中管理，通过合理使用useCallback和useMemo，在保持代码可读性的同时实现了性能优化。

讨论

选择表情