面试题：Solid.js中createSignal与createEffect在复杂响应式逻辑中的协同机制

Question

有一个电商购物车场景，商品列表通过createSignal维护，每个商品有价格和数量。总价通过createEffect计算得出并显示。当商品数量变化或者商品价格变化时，总价要实时更新。同时，当总价超过一定阈值时，触发一个促销逻辑（比如打九折）。请详细说明createSignal和createEffect是如何协同实现这些复杂响应式逻辑的，并且给出关键代码片段及注释。

Answer 1

1. 理解 createSignal 和 createEffect

• createSignal：用于创建响应式状态。它返回一个数组，包含两个元素：第一个是获取当前状态值的函数，第二个是更新状态值的函数。在电商购物车场景中，它适合维护商品列表的每个商品的价格和数量。
• createEffect：用于创建副作用，当依赖的响应式数据变化时，会自动重新运行。在这个场景下，用于根据商品的价格和数量实时计算总价，并在总价变化时检查是否触发促销逻辑。

2. 关键代码片段及注释

假设使用的是 SolidJS 框架（因为它提供了 createSignal 和 createEffect 类似的 API）：

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

// 创建商品列表的信号
const [products, setProducts] = createSignal([
  { id: 1, price: 10, quantity: 1 },
  { id: 2, price: 20, quantity: 2 }
]);

// 创建总价的信号，初始值为0
const [totalPrice, setTotalPrice] = createSignal(0);

// 创建促销阈值
const promotionThreshold = 100;

// 使用 createEffect 计算总价
createEffect(() => {
  const currentProducts = products();
  let total = 0;
  // 遍历商品列表，计算总价
  currentProducts.forEach(product => {
    total += product.price * product.quantity;
  });
  setTotalPrice(total);

  // 检查是否触发促销逻辑
  if (total > promotionThreshold) {
    setTotalPrice(total * 0.9);
  }
});

// 模拟商品数量变化
const handleQuantityChange = (productId, newQuantity) => {
  const currentProducts = products();
  const updatedProducts = currentProducts.map(product => {
    if (product.id === productId) {
      return {...product, quantity: newQuantity };
    }
    return product;
  });
  setProducts(updatedProducts);
};

// 模拟商品价格变化
const handlePriceChange = (productId, newPrice) => {
  const currentProducts = products();
  const updatedProducts = currentProducts.map(product => {
    if (product.id === productId) {
      return {...product, price: newPrice };
    }
    return product;
  });
  setProducts(updatedProducts);
};

3. 代码说明

1. 商品列表和总价信号创建：使用 createSignal 创建了 products 信号用于维护商品列表，totalPrice 信号用于维护总价。
2. 计算总价及促销逻辑：createEffect 依赖 products 信号。当 products 中的商品价格或数量变化时，createEffect 会重新运行，重新计算总价并检查是否超过促销阈值，如果超过则应用打九折的促销逻辑。
3. 模拟商品数量和价格变化：handleQuantityChange 和 handlePriceChange 函数用于更新商品列表中的数量和价格，进而触发 createEffect 重新计算总价。