我正在完成一项技术挑战，并遇到了一个我以前从未遇到过的场景。
我被要求编写一个购物车，该购物车的 UI 表示基本结帐数据，例如订单总数、购物车中的当前商品等。
其中一项要求是我需要实现一个可以实例化的Checkout 类：
const checkout = new Checkout();
我应该能够从中获取基本信息，例如：
const total = checkout.total();
并通过它添加商品到购物车：
checkout.add(product.id);
是什么让这个问题变得棘手，因为我想不出一种干净的“DRY”方式将其实现到 UI 中。这主要是因为 checkout 类中的任何更新都不会触发任何重新渲染，因为它不是状态的一部分。我通常会为此使用状态变量。
我尝试将状态变量绑定到结账类中的参数，例如：
const [total, setTotal] = useState();
useEffect(()=>{
setTotal(checkout.total)
}, [checkout.total])
但checkout.total只是对方法的引用，所以它永远不会改变，所以我没有得到我想要的绑定。
尝试其他东西我设法组合出一个“解决方案”，但我怀疑这是否是一个好的模式。
我基本上将回调传递给结帐类，每当购物车更新时都会调用该回调。回调是状态变量的设置器，因此：
const [cart, setCart] = useState<string[]>(checkout.cart);
checkout.callback = setCart;
然后在add方法里面：
add(productId) {
// Some code...
this.callback([...this.cart]);
}
这允许每当类的参数发生变化cart时状态变量就会更新。checkout因此，它会在 Cart 组件及其所有具有传递 props 的子组件上触发重新渲染。因此我得到了一个同步的用户界面。
问题是我除了强制重新渲染之外不需要购物车变量。我可以直接从班级获取购物车信息，checkout这就是我所做的。但为了将其反映在 UI 中，我需要更新一些状态变量。它甚至可能是一个计数器，我只是选择cart而不是计数器，以使其更加连贯，我想。
我在这里把事情复杂化了吗？我是否缺少用于此场景的模式？通常如何与实例化的类进行交互并确保 UI 以某种方式根据类的更改进行更新？
编辑（添加缺少的信息）：Checkout 类需要实现以下接口：
interface …我正在使用 NextJS 的本机<Image />组件在我的应用程序中渲染图像。
某些图像出现在提示中，例如弹出新闻通讯提示。问题是，提示仅在需要显示时才安装在 DOM 中（与大多数 React 组件一样）。display: none;它不像以前在 jQuery 网站中那样“存在”在 DOM 中。它要么存在并且可见，要么根本不存在。
问题是图像只有在首次安装后才开始加载。我认为可能有一种 NextJS 方法来告诉框架开始加载图像，即使它尚未安装。这样，在图像直接出现在用户眼前之前，我们就可以为用户节省 0.3 秒的尴尬空白提示。
有没有解决方法？或者我应该回到旧的方式并从一开始就安装我的提示，并切换它们的显示属性？