为您的 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));
}
这基本上就是重新选择所做的。如果您计划在全局级别实施 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基础数据的函数，你可以保持其他选择器的接口干净。
编辑：关于收藏
上述实现目前易受攻击的一件事是 ifextendUserDataSelectorSelector的输出更改，因为它自己的依赖项选择器发生了变化，但userSelector通过extendUserDataSelectorSelector. 在这些情况下，您需要做两件事：
- 多记忆
extendUserDataSelectorSelector返回的函数。我建议将其提取到一个单独的全局记忆函数中。
- 换行，
someFunc以便当它返回一个数组时，它将该数组元素与前一个结果进行比较，如果它们具有相同的元素，则返回前一个结果。
编辑：避免如此多的缓存
如上所示，在全局级别缓存当然是可行的，但是如果您考虑到其他几个策略来解决问题，则可以避免这种情况：
- 不要急切地扩展数据，将其推迟到实际呈现数据本身的每个 React（或其他视图）组件。
- 不要急切地将 ids/base-objects 列表转换为扩展版本，而是让父母将这些 ids/base-objects 传递给孩子们。
在我的一个主要工作项目中，我一开始没有遵循这些，但我希望我有。事实上，我后来不得不转而采用全局记忆路线，因为这比重构所有视图更容易修复，这是应该完成但我们目前缺乏时间/预算的事情。
编辑 2（或 4 我猜？）：重新考虑收藏 pt。1：多重记忆扩展器
注意：在您阅读这部分之前，它假定传递给扩展器的基础实体将具有某种id可用于唯一标识它的属性，或者可以廉价地从中派生出某种类似的属性。
为此，您可以以类似于任何其他选择器的方式记住扩展器本身。但是，由于您希望 Extender 记住其参数，因此您不想将 State 直接传递给它。
基本上，您需要一个 Multi-Memoizer，它的作用基本上与Re-reselect对 Selectors 的作用相同。事实上，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 本身可能不会改变，但其中的 id 指向的实体可能会改变。arrayOfSomeIds 可能是内存中的一个新对象，但实际上具有相同的 ID。arrayOfSomeIds 没有改变，但是包含被引用实体的集合确实改变了，但是这些特定 id 引用的特定实体没有改变。
这就是为什么我提倡将数组（和其他集合！）的扩展/扩展/具体化/任何其他化的任务委派到数据获取-派生-视图-渲染过程中尽可能晚的时间：杏仁核的痛苦是考虑这一切。
也就是说，这并非不可能，只是需要进行一些额外的检查。
从上面的缓存版本开始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，这可能已经足够了。但是，有时您可能还需要捕获案例 2，检查输入数组。这可以通过使用 reselectcreateSelectorCreator来使用自定义相等函数来制作我们自己的createSelector
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和时，您应该尝试查看 npm 中显示的内容re-reselect。那里的一些新工具可能对某些情况有用，也可能没有用。不过，您只需重新选择和重新选择，再加上一些额外的功能来满足您的需求，就可以做很多事情。
