Reactjs 重新选择备忘忽略不相关的更新

以下是重新选择文档的示例：

import { createSelector } from 'reselect'

const shopItemsSelector = state => state.shop.items

const subtotalSelector = createSelector(
  shopItemsSelector,
  items => items.reduce((acc, item) => acc + item.value, 0)
)

在典型的redux应用程序中，

小计选择器

将在用户更新

item.name

时重新计算，即使这对结果没有影响。有没有办法避免这种情况？

两种解决方案：

随它去吧。除非您有大量项目，否则浏览器的计算能力足以处理重新计算

将价格与物品对象分开。也就是说，您有

state.shop.items.itemNames

（包含id-name对）和

state.shop.items.itemValues

（包含id-value对）。然后只有

itemValues

被传递给选择器

---

我有一个类似的问题，我已经找到了一种黑客获得它

我有一套复杂的过滤器，需要过滤的项目很多。部分过滤器状态包括显示状态。我想忽略显示状态的变化，这样我就不会一直过滤一个巨大的列表。这是一个简单的解决方案：

const getFilters = createSelector(
    state => state.filters,
    filters => {
        const filtersWithoutDisplay = {};
        const ignoreObj = { collapsed: null };
        for (let filterGroup in filters) {
            filtersWithoutDisplay[filterGroup] = Object.assign({}, filters[filterGroup], ignoreObj);
        }
        // We create a new object every time, so this cannot be memoized properly unless we stringify.
        return JSON.stringify(filtersWithoutDisplay);
    }
);

它返回一个必须解析的JSON字符串，但它是一个原语，因此作为另一个选择器的输入，如果实际内容不变，它不会触发重新计算。那是一种黑客行为

您还可以在选择器函数之外定义一个对象，并始终保持相同的引用，根据相同的模式更改内部，然后通过拉入

createSelectorCreator

，使用自定义的深度相等检查，如下所述。这可能是一个更好的方法，但正如它所说：

始终检查状态更新函数中的替代equalityCheck函数或深度相等检查的开销是否不大于每次重新计算的开销

这也适用于JSON.stringify黑客。我不会为了庞大的列表而这么做，但为了过滤器，当然

在我的情况下，重构我的状态可能更好，因为过滤器值可能与过滤器显示设置无关，这可能不是我唯一希望它们分开的时候