SolidJS：项目列表中活动项目的最佳实践

Question

我的应用程序有一个项目列表（每个项目都是一个对象），其中一个项目可以处于活动状态。我正在使用 SolidJS。

我的第一个想法是代表应用程序在商店中的整个状态：

const [store, setStore] = createStore({
  items: [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" }
  ],
  activeItem: null
});

这不起作用，因为当我更改 activeItem 时，它会修改以前的活动项目。

setStore('activeItem', store.items[0]);
setStore('activeItem', store.items[1]); // This modifies the ID and Name of store.items[0]. We end up with an array with two bananas.

这种情况下的最佳做法是什么？将活动商品存放在商店外？仅存储活动项目的 ID，并在每次访问时查找它？还有别的吗？

Answer 1

Solid 为此提供了

createSelector

函数。它通过仅针对与所选项目相对应的 DOM 节点发布更新来显着减少更新次数。