在移动电商界面中，购物车图标右上角的数量徽标是典型的"局部状态 + 条件渲染"模式。下面以 React Native（兼容鸿蒙）为例，从类型建模、状态管理、函数式更新到跨端优化，给出一个生产可用的实现方案。

核心类型与契约

type Merchandise = {
  id: string;
  title: string;
  unitPrice: number;
  markPrice?: number;
  score: number;
  reviews: number;
  thumb: string;
  category: string;
  offPercent?: number;
  favorite: boolean;
  newly: boolean;
};

type CatalogItem = {
  id: string;
  label: string;
  emoji: string;
};

type BasketEntry = {
  uid: string;
  goodsId: string;
  goodsTitle: string;
  unitPrice: number;
  amount: number;
};

这些类型严格区分了展示数据和交互状态：可选字段仅影响视觉，不会干扰主流；价格、收藏等语义完全在 JS 线程判定，原生 UI 线程只负责渲染，这为跨平台一致性打下基础。

组件化界面与条件渲染

商品卡片组件接收 Merchandise 并通过 props 暴露 "加入购物车" 和 "切换收藏" 行为：

const GoodsCard = ({item, onCartAdd, onFavoriteToggle}: {item: Merchandise; onCartAdd: (item: Merchandise) => void; onFavoriteToggle: (id: string) => void}) => (
  <View style={s.card}>
    <View style={s.thumbBox}>
      <Text style={s.thumbEmoji}>🛍️</Text>
      {item.offPercent > 0 && (
        <View style={s.offBadge}><Text style={s.offText}>-{item.offPercent}%</Text></View>
      )}
      {item.newly && (
        <View style={s.newBadge}><Text style={s.newText}>新品</Text></View>
      )}
    </View>
    <View style={s.meta}>
      <Text style={s.title} numberOfLines={2}>{item.title}</Text>
      <Stars score={item.score} />
      <Text style={s.price}>¥{item.unitPrice}</Text>
      <View style={s.actions}>
        <Pressable style={s.cartBtn} onPress={() => onCartAdd(item)}>
          <Text>购买</Text>
        </Pressable>
        <Pressable onPress={() => onFavoriteToggle(item.id)}>
          <Heart active={item.favorite} />
        </Pressable>
      </View>
    </View>
  </View>
);

折扣、新品标记都是基于条件渲染的视觉装饰，平台侧只是被动接收布尔值，不会产生额外的交互协议差异。

购物车状态与不可变更新

使用函数式 setState 避免闭包陈旧引用，确保高频操作（添加、增减数量）始终基于最新的快照：

const [basket, setBasket] = useState<BasketEntry[]>([]);

const addToBasket = (goods: Merchandise) => {
  setBasket(prev => {
    const found = prev.find(e => e.goodsId === goods.id);
    if (found) {
      return prev.map(e => e.uid === found.uid ? {...e, amount: e.amount + 1} : e);
    }
    return [...prev, {
      uid: `${Date.now()}-${Math.random().toString(36).substr(2, 6)}`,
      goodsId: goods.id,
      goodsTitle: goods.title,
      unitPrice: goods.unitPrice,
      amount: 1,
    }];
  });
};

const incAmount = (uid: string) => setBasket(prev => prev.map(e => e.uid === uid ? {...e, amount: e.amount + 1} : e));
const decAmount = (uid: string) => setBasket(prev => prev.map(e => e.uid === uid && e.amount > 1 ? {...e, amount: e.amount - 1} : e));
const delEntry = (uid: string) => setBasket(prev => prev.filter(e => e.uid !== uid));

数量徽标与条件渲染

头部购物车按钮内嵌数量徽标，依赖于 basket.length 的局部状态，通过条件渲染控制显示：

<View style={s.headerRight}>
  <Pressable style={s.cartIconBox}>
    <Text style={s.cartIcon}>🛒</Text>
    {basket.length > 0 && (
      <View style={s.countBadge}>
        <Text style={s.countText}>{basket.length}</Text>
      </View>
    )}
  </Pressable>
</View>

这种"局部状态 + 条件渲染"的模式简洁且性能友好，避免了全局状态管理的冗余订阅。配合函数式更新，即使在鸿蒙端通过桥接传递状态，也能保证数值同步。

滚动容器与性能

为了避免嵌套滚动，使用 FlatList 的 ListHeaderComponent 和 ListFooterComponent 组合整页内容，形成单一滚动上下文，使得 ArkUI / Skia 合成层可更高效地进行布局与合成。

<FlatList
  data={goodsList}
  renderItem={({item}) => <GoodsCard ... />}
  numColumns={2}
  columnWrapperStyle={s.grid}
  ListHeaderComponent={PageHeader}
  ListFooterComponent={<BasketSection />}
  removeClippedSubviews
  windowSize={7}
/>

动画增强

收藏心形采用 Animated.timing 并启用 useNativeDriver，将动画工作完全交给 UI 线程：

const Heart = ({active}: {active: boolean}) => {
  const scaleAnim = useRef(new Animated.Value(1)).current;
  useEffect(() => {
    Animated.sequence([
      Animated.timing(scaleAnim, {toValue: active ? 1.3 : 1, duration: 140, useNativeDriver: true}),
      Animated.timing(scaleAnim, {toValue: 1, duration: 120, useNativeDriver: true})
    ]).start();
  }, [active]);
  return <Animated.Text style={{transform: [{scale: scaleAnim}]}}>{active ? '❤️' : '♡'}</Animated.Text>;
};

鸿蒙构建流水线

项目通过 npm run harmony 打包生成 JS Bundle，随后复制至 DevEco Studio 工程目录，即可在 OpenHarmony 设备上运行。下图展示了打包过程与最终效果：

运行效果如下，数量徽标在购物车操作后实时更新，且跨端表现一致：

以上实现聚焦于 "局部状态 + 条件渲染" 的核心模式，类型系统保证了数据流向的稳定性，函数式更新规避了异步争用，配合原生驱动的动画，在包括鸿蒙在内的多个平台上均能获得流畅、可靠的用户体验。