面试题：Solid.js中createSignal与createEffect复杂场景下的生命周期管理

Question

在Solid.js项目里，有多个相互依赖的createSignal和createEffect。例如，有一个商品列表，每个商品有库存数量（由createSignal管理），当库存数量变化时，需要通过createEffect更新总库存数。同时，总库存数变化时，又会触发另一个createEffect来调整购物车的可购买状态。请描述如何确保这些操作的正确执行顺序以及避免无限循环，写出关键代码片段。

Answer 1

1. 确保操作顺序：
   • 在Solid.js中，createEffect会在其依赖的createSignal变化时自动执行。为了确保操作顺序，我们可以依赖数据的自然流动。例如，库存数量变化会触发更新总库存数的createEffect，而总库存数变化又会触发调整购物车可购买状态的createEffect。
2. 避免无限循环：
   • 避免无限循环的关键在于确保每个createEffect的依赖是明确且有限的。如果一个createEffect依赖于某个信号，而这个信号在该createEffect执行过程中被更新，就可能导致无限循环。在这个场景中，只要每个createEffect的更新逻辑不会导致依赖信号的无限更新，就不会出现无限循环。

以下是关键代码片段：

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

// 商品列表，每个商品有库存数量
const products = [
    { id: 1, name: 'Product 1', stock: createSignal(10) },
    { id: 2, name: 'Product 2', stock: createSignal(5) }
];

// 总库存数
const [totalStock, setTotalStock] = createSignal(0);

// 购物车可购买状态
const [canPurchase, setCanPurchase] = createSignal(true);

// 当库存数量变化时，更新总库存数
createEffect(() => {
    let sum = 0;
    products.forEach(product => {
        sum += product.stock();
    });
    setTotalStock(sum);
});

// 当总库存数变化时，调整购物车的可购买状态
createEffect(() => {
    setCanPurchase(totalStock() > 0);
});

在上述代码中：

• 第一个createEffect依赖于每个商品的stock信号，当任何商品的库存数量变化时，会重新计算总库存数并更新totalStock。
• 第二个createEffect依赖于totalStock信号，当总库存数变化时，会调整购物车的可购买状态canPurchase。由于每个createEffect的依赖明确且更新逻辑不会导致无限更新，所以可以正确执行且避免无限循环。