面试题：Solid.js createEffect 在复杂场景下的数据同步处理

Question

假设有一个电商购物车场景，商品列表中的每个商品有数量、价格等信息，使用 Solid.js 的 createEffect 实现当某个商品数量变化时，实时更新该商品的小计以及购物车的总计金额。同时要考虑性能优化，避免不必要的重复计算。请说明思路并编写关键代码。

Answer 1

思路

1. 使用 Solid.js 的响应式系统来跟踪商品数量的变化。
2. 利用 createEffect 来监听商品数量变化，并重新计算该商品的小计和购物车总计金额。
3. 为避免不必要的重复计算，使用 createMemo 来缓存计算结果，只有依赖项变化时才重新计算。

关键代码

import { createSignal, createEffect, createMemo } from 'solid-js';

// 商品数据结构
const product = {
  quantity: createSignal(1),
  price: 10
};

// 计算商品小计
const subTotal = createMemo(() => product.quantity() * product.price);

// 购物车中所有商品列表（这里假设只有一个商品简化示例，实际可以是数组）
const cart = [product];

// 计算购物车总计金额
const total = createMemo(() => cart.reduce((acc, item) => acc + item.quantity() * item.price, 0));

// 监听商品数量变化更新小计和总计
createEffect(() => {
  subTotal(); // 确保小计重新计算
  total(); // 确保总计重新计算
});

// 在组件中使用
const ShoppingCart = () => {
  return (
    <div>
      <p>商品数量: {product.quantity()}</p>
      <p>商品价格: {product.price}</p>
      <p>商品小计: {subTotal()}</p>
      <p>购物车总计: {total()}</p>
      <button onClick={() => product.quantity(product.quantity() + 1)}>增加数量</button>
    </div>
  );
};

export default ShoppingCart;