为您的 someFunc 案例
对于您的具体情况，我将创建一个本身返回扩展器的选择器。
也就是说，对于这个：
const someFunc = (store, id) => {
const data = userSelector(store, id);
// ^^^^^^^^^^^^ global selector
return data.map((user) => extendUserDataSelector(store, user));
// ^^^^^^^^^^^^^^^^^^^^ selector
}
我会写：
const extendUserDataSelectorSelector = createSelector(
selectStuffThatExtendUserDataSelectorNeeds,
(state) => state.something.else.it.needs,
(stuff, somethingElse) =>
// This function will be cached as long as
// the results of the above two selectors
// does not change, same as with any other cached value.
(user) => {
// your magic goes here.
return {
// ... user with stuff and somethingElse
};
}
);
那么someFunc 会变成：
const someFunc = createSelector(
userSelector,
extendUserDataSelectorSelector,
// I prefix injected functions with a $.
// It's not really necessary.
(data, $extendUserDataSelector) =>
data.map($extendUserDataSelector)
);
我称它为 reifier 模式，因为它创建了一个预先绑定到当前状态的函数，它接受单个输入并将其具体化。我通常用它来通过 id 获取东西，因此使用“reify”。我也喜欢说“reify”，老实说，这是我这么称呼它的主要原因。
对于您的情况
在这种情况下：
import { isEqual } from 'lodash';
const memoizer = {};
const someFunc = (store, id) => {
const data = userSelector(store, id);
if (id in memoizer && isEqual(data, memoizer(id)) {
return memoizer[id];
}
memoizer[id] = data;
return memoizer[id].map((user) => extendUserDataSelector(store, user));
}
这基本上就是re-reselect 所做的。如果您计划在全局级别实施 per-id memoization，您可能希望考虑这一点。
import createCachedSelector from 're-reselect';
const someFunc = createCachedSelector(
userSelector,
extendUserDataSelectorSelector,
(data, $extendUserDataSelector) =>
data.map($extendUserDataSelector)
// NOTE THIS PART DOWN HERE!
// This is how re-reselect gets the cache key.
)((state, id) => id);
或者你可以把你的 memoized-multi-selector-creator 用弓包起来，然后叫它createCachedSelector，因为它基本上是一样的。
编辑：为什么要返回函数
您可以这样做的另一种方法是只选择运行extendUserDataSelector 计算所需的所有适当数据，但这意味着将要使用该计算的所有其他函数暴露于其接口。通过返回一个只接受单个 user 基准数据的函数，您可以保持其他选择器的接口干净。
编辑：关于收藏
上述实现目前易受攻击的一件事是，如果extendUserDataSelectorSelector 的输出发生变化，因为它自己的依赖选择器发生了变化，但userSelector 获得的用户数据没有变化，由 userSelector 创建的实际计算实体也没有变化extendUserDataSelectorSelector。在这些情况下，您需要做两件事：
- 多记忆
extendUserDataSelectorSelector返回的函数。我建议将其提取到单独的全局记忆函数中。
- 包装
someFunc，这样当它返回一个数组时，它会将该数组元素与前一个结果进行比较，如果它们具有相同的元素，则返回前一个结果。
编辑：避免大量缓存
如上所示，在全局级别缓存当然是可行的，但如果您考虑使用其他几种策略来解决问题，则可以避免这种情况：
- 不要急于扩展数据，将其推迟到实际呈现数据本身的每个 React（或其他视图）组件。
- 不要急于将 ids/base-objects 列表转换为扩展版本，而是让父母将这些 ids/base-objects 传递给孩子。
一开始我并没有在我的一个主要工作项目中遵循这些，但希望我有。事实上，我后来不得不走全局记忆路线，因为这比重构所有视图更容易修复，这是应该做的，但我们目前缺乏时间/预算。
编辑 2（或者我猜是 4？）：重新关注收藏 pt。 1：Multi-Memoizing 扩展器
注意：在阅读这部分之前，假设传递给扩展器的基本实体将具有某种id 属性，可用于唯一标识它，或者某种类似的属性可以是从它廉价地衍生出来。
为此，您以类似于任何其他选择器的方式记忆扩展器本身。但是，由于您希望 Extender 记住它的参数，所以您不想直接将 State 传递给它。
基本上，您需要一个 Multi-Memoizer，它的作用方式与 re-reselect 对选择器的作用基本相同。
事实上，让createCachedSelector 为我们这样做是微不足道的：
function cachedMultiMemoizeN(n, cacheKeyFn, fn) {
return createCachedSelector(
// NOTE: same as [...new Array(n)].map((e, i) => Lodash.nthArg(i))
[...new Array(n)].map((e, i) => (...args) => args[i]),
fn
)(cacheKeyFn);
}
function cachedMultiMemoize(cacheKeyFn, fn) {
return cachedMultiMemoizeN(fn.length, cacheKeyFn, fn);
}
然后代替旧的extendUserDataSelectorSelector：
const extendUserDataSelectorSelector = createSelector(
selectStuffThatExtendUserDataSelectorNeeds,
(state) => state.something.else.it.needs,
(stuff, somethingElse) =>
// This function will be cached as long as
// the results of the above two selectors
// does not change, same as with any other cached value.
(user) => {
// your magic goes here.
return {
// ... user with stuff and somethingElse
};
}
);
我们有这两个功能：
// This is the main caching workhorse,
// creating a memoizer per `user.id`
const extendUserData = cachedMultiMemoize(
// Or however else you get globally unique user id.
(user) => user.id,
function $extendUserData(user, stuff, somethingElse) {
// your magic goes here.
return {
// ...user with stuff and somethingElse
};
}
);
// This is still wrapped in createSelector mostly as a convenience.
// It doesn't actually help much with caching.
const extendUserDataSelectorSelector = createSelector(
selectStuffThatExtendUserDataSelectorNeeds,
(state) => state.something.else.it.needs,
(stuff, somethingElse) =>
// This function will be cached as long as
// the results of the above two selectors
// does not change, same as with any other cached value.
(user) => extendUserData(
user,
stuff,
somethingElse
)
);
extendUserData 是真正的缓存发生的地方，但公平警告：如果您有很多 baseUser 实体，它可能会变得非常大。
编辑 2（或者我猜是 4？）：重新关注收藏 pt。 2：数组
数组是缓存存在的祸根：
-
arrayOfSomeIds 本身可能不会改变，但其中的 ids 指向的实体可能具有。
-
arrayOfSomeIds 可能是内存中的新对象，但实际上具有相同的 id。
-
arrayOfSomeIds 没有改变，但包含被引用实体的集合确实发生了变化，而这些特定 id 引用的特定实体没有改变。
这就是为什么我主张将数组（和其他集合！）的扩展/扩展/具体化/whateverelseification 委托给尽可能晚的数据获取-导出-视图-渲染过程：这是一个痛苦杏仁核必须考虑所有这些。
也就是说，这并非不可能，只是需要进行一些额外的检查。
从上面缓存的someFunc开始：
const someFunc = createCachedSelector(
userSelector,
extendUserDataSelectorSelector,
(data, $extendUserDataSelector) =>
data.map($extendUserDataSelector)
// NOTE THIS PART DOWN HERE!
// This is how re-reselect gets the cache key.
)((state, id) => id);
然后我们可以将它包装在另一个只缓存输出的函数中：
function keepLastIfEqualBy(isEqual) {
return function $keepLastIfEqualBy(fn) {
let lastValue;
return function $$keepLastIfEqualBy(...args) {
const nextValue = fn(...args);
if (! isEqual(lastValue, nextValue)) {
lastValue = nextValue;
}
return lastValue;
};
};
}
function isShallowArrayEqual(a, b) {
if (a === b) return true;
if (Array.isArray(a) && Array.isArray(b)) {
if (a.length !== b.length) return false;
// NOTE: calling .every on an empty array always returns true.
return a.every((e, i) => e === b[i]);
}
return false;
}
现在，我们不能只将其应用于createCachedSelector 的结果，而只能应用于一组输出。相反，我们需要为createCachedSelector 创建的每个底层选择器使用它。幸运的是，重新选择允许您配置它使用的选择器创建器：
const someFunc = createCachedSelector(
userSelector,
extendUserDataSelectorSelector,
(data, $extendUserDataSelector) =>
data.map($extendUserDataSelector)
)((state, id) => id,
// NOTE: Second arg to re-reselect: options object.
{
// Wrap each selector that createCachedSelector itself creates.
selectorCreator: (...args) =>
keepLastIfEqualBy(isShallowArrayEqual)(createSelector(...args)),
}
)
奖励部分：数组输入
您可能已经注意到，我们只检查数组输出，涵盖情况 1 和 3，这可能已经足够了。但是，有时您可能还需要 catch case 2 来检查输入数组。
这可以通过使用重新选择的createSelectorCreator 到make our own createSelector using a custom equality function 来实现
import { createSelectorCreator, defaultMemoize } from 'reselect';
const createShallowArrayKeepingSelector = createSelectorCreator(
defaultMemoize,
isShallowArrayEqual
);
// Also wrapping with keepLastIfEqualBy() for good measure.
const createShallowArrayAwareSelector = (...args) =>
keepLastIfEqualBy(
isShallowArrayEqual
)(
createShallowArrayKeepingSelector(...args)
);
// Or, if you have lodash available,
import compose from 'lodash/fp/compose';
const createShallowArrayAwareSelector = compose(
keepLastIfEqualBy(isShallowArrayEqual),
createSelectorCreator(defaultMemoize, isShallowArrayEqual)
);
这进一步更改了someFunc 的定义，尽管只是通过更改selectorCreator：
const someFunc = createCachedSelector(
userSelector,
extendUserDataSelectorSelector,
(data, $extendUserDataSelector) =>
data.map($extendUserDataSelector)
)((state, id) => id, {
selectorCreator: createShallowArrayAwareSelector,
});
其他想法
话虽如此，当您搜索 reselect 和 re-reselect 时，您应该尝试查看 npm 中显示的内容。那里的一些新工具可能对某些情况有用也可能没有用。不过，只需重新选择和重新选择以及一些额外的功能来满足您的需求，您就可以做很多事情。