React组件设计模式：双12架构优化

前端

2023-10-06 03:10:16

React组件设计模式：面向双12的架构优化

作为一名技术博客的创造者，我总是致力于以独特的视角审视问题，用文字点燃灵感之火。今天，我们共同踏上一次探索 React 组件设计模式的旅程，并探讨如何为双 12 大促优化架构。

传统模式的局限

传统上，我们在构建组件时，遵循的是 list 包裹 item 的模式。数据存储在 list 组件中，item 作为无状态组件负责展示。数据交互通过 props 传递，比如点击“+-”按钮改变购物车中的数据。

然而，当遇到双 12 这样的大促活动时，这种模式就显得捉襟见肘。商品需要打八折优惠，这意味着需要修改代码来处理折扣计算。

数据抽象的威力

为了解决这一难题，我们可以引入数据抽象的概念。将商品数据从 list 组件中剥离，放到一个单独的 store 中。这样，组件只需要关注展示数据，而折扣计算的逻辑则由 store 来处理。

例如，我们可以创建一个 ProductStore 类：

class ProductStore {
  constructor() {
    this.products = [];
  }

  addProduct(product) {
    this.products.push(product);
  }

  getDiscountedPrice(product) {
    return product.price * 0.8; // 双12 8折优惠
  }
}

组件解耦和复用

将数据抽象到 store 中后，组件之间的耦合度大大降低。list 和 item 组件只需要从 store 中获取数据，不需要关心折扣计算的具体逻辑。

同时，由于 store 是全局共享的，我们可以轻松地在不同的组件中复用它。比如，我们可以创建一个购物篮组件，它从 store 中获取商品数据并显示总价：

const ShoppingCart = () => {
  const products = useStore(ProductStore).products;

  const total = products.reduce((acc, product) => acc + product.discountedPrice, 0);

  return (
    <div>
      <p>Total: ${total}</p>
    </div>
  );
};