React中如何将Checkout类与组件状态同步？

1. 回调通知模式（你当前使用的方案，合理且实用） #

这种模式将Checkout作为独立的业务逻辑层，通过传入状态更新回调，在内部数据变化时通知React组件触发重渲染，符合关注点分离原则。

Checkout类实现： #

class Checkout {
  constructor(onUpdate) {
    this.items = [];
    this.onUpdate = onUpdate; // 接收外部更新回调
  }

  add(productId) {
    this.items.push(productId);
    this.onUpdate(); // 数据变化时通知组件
    return this; // 保持链式调用能力
  }

  total() {
    // 替换为实际总额计算逻辑
    return this.items.reduce((sum, id) => {
      const productPrice = products[id] || 0; // 假设products是商品价格映射
      return sum + productPrice;
    }, 0);
  }
}

React组件使用： #

import { useState, useCallback } from 'react';

function ShoppingCart() {
  // 用空对象触发重渲染，无需存储实际数据
  const [, forceRender] = useState({});
  
  // 确保Checkout实例只创建一次
  const checkout = useCallback(() => {
    return new Checkout(() => forceRender({}));
  }, []);
  const checkoutInstance = checkout();

  const handleAddProduct = (productId) => {
    // 链式调用示例
    checkoutInstance.add(productId).add(productId);
  };

  return (
    <div className="cart">
      <button onClick={() => handleAddProduct('shirt')}>添加T恤</button>
      <button onClick={() => handleAddProduct('pants')}>添加裤子</button>
      <div className="total">订单总额: ${checkoutInstance.total()}</div>
    </div>
  );
}

2. 发布订阅模式（适合多组件依赖购物车状态） #

如果应用中有多个组件需要响应购物车变化，让Checkout实现发布订阅模式会更灵活，不需要将组件的setter硬编码到类中。

Checkout类实现： #

class Checkout {
  constructor() {
    this.items = [];
    this.subscribers = new Set(); // 存储订阅者回调
  }

  add(productId) {
    this.items.push(productId);
    this.notifySubscribers(); // 通知所有订阅者
    return this;
  }

  total() {
    return this.items.reduce((sum, id) => sum + (products[id] || 0), 0);
  }

  // 订阅变化，返回取消订阅函数
  subscribe(callback) {
    this.subscribers.add(callback);
    return () => this.subscribers.delete(callback);
  }

  notifySubscribers() {
    this.subscribers.forEach(callback => callback());
  }
}

React组件使用： #

import { useState, useEffect, useRef } from 'react';

function ShoppingCart() {
  const checkoutRef = useRef(new Checkout());
  const [, forceRender] = useState({});

  useEffect(() => {
    // 订阅购物车变化，组件卸载时取消订阅
    const unsubscribe = checkoutRef.current.subscribe(() => {
      forceRender({});
    });
    return unsubscribe;
  }, []);

  const handleAddProduct = (productId) => {
    checkoutRef.current.add(productId);
  };

  return (
    <div className="cart">
      <button onClick={() => handleAddProduct('shirt')}>添加T恤</button>
      <div className="total">订单总额: ${checkoutRef.current.total()}</div>
    </div>
  );
}

3. 同步Checkout状态到React State（让React完全控制渲染） #

如果希望React状态作为单一数据源，可以将Checkout的内部状态同步到组件state，React会自动处理重渲染。注意要保持Checkout实例和state的一致性。

Checkout类实现： #

class Checkout {
  constructor() {
    this.items = [];
  }

  add(productId) {
    this.items.push(productId);
    return this;
  }

  total() {
    return this.items.reduce((sum, id) => sum + (products[id] || 0), 0);
  }

  // 返回内部状态副本，避免外部直接修改
  getItems() {
    return [...this.items];
  }
}

React组件使用： #

import { useState, useRef } from 'react';

function ShoppingCart() {
  const checkoutRef = useRef(new Checkout());
  const [cartItems, setCartItems] = useState(checkoutRef.current.getItems());

  const handleAddProduct = (productId) => {
    checkoutRef.current.add(productId);
    // 同步Checkout状态到React State，触发重渲染
    setCartItems(checkoutRef.current.getItems());
  };

  const total = checkoutRef.current.total();

  return (
    <div className="cart">
      <button onClick={() => handleAddProduct('shirt')}>添加T恤</button>
      <div className="total">订单总额: ${total}</div>
    </div>
  );
}

方案总结 #

• 你当前使用的回调通知模式是完全合理的，适合单一组件依赖购物车状态的场景，代码简洁且解耦清晰。
• 若有多组件需要响应购物车变化，优先选择发布订阅模式，扩展性更强。
• 若希望React完全管控UI状态，可使用同步State方案，但需注意维护Checkout实例与组件State的一致性。

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