https://github.com/reduxjs/reselect/blob/master/src/index.js#L89
export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {
let lastArgs = null
let lastResult = null
// we reference arguments instead of spreading them for performance reasons
return function () {
if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
// apply arguments instead of spreading for performance.
lastResult = func.apply(null, arguments)
}
lastArgs = arguments
return lastResult
}
}
export function createSelectorCreator(memoize, ...memoizeOptions) {
return (...funcs) => {
let recomputations = 0
const resultFunc = funcs.pop()
const dependencies = getDependencies(funcs)
const memoizedResultFunc = memoize(
function () {
recomputations++
// apply arguments instead of spreading for performance.
return resultFunc.apply(null, arguments)
},
...memoizeOptions
)
...}
}
export const createSelector = createSelectorCreator(defaultMemoize)
因此，如果我创建createSelector(getUsers, (users) => users)来做一个简单的例子。它是如何落后于上面的代码的？
使用CCD_ 3输入来调用CCD_ 2。现在defaultMemoize也是一个返回函数的函数。它们是如何相互作用以返回值的？
我认为重选工作方式更重要的是为什么应该使用它。主要原因是可组合性和记忆性：
可组合性
另一种说法是，只编写一次选择器，然后在其他更详细的选择器中重用它。假设我有一个这样的状态：{data:{people:[person,person ...]}然后我可以写一个像这样的filterPerson:
const selectData = state => state.data;
const selectDataEntity = createSelector(
selectData,//reuse selectData
(_, entity) => entity,
(data, entity) => data[entity]
);
const filterDataEntity = createSelector(
selectDataEntity,//reuse selectDataEntity
(a, b, filter) => filter,
(entities, filter) => entities.filter(filter)
);
如果我将数据移动到state.apiResult，那么我只需要更改selectData，这将最大限度地提高代码的重用性，并最大限度地减少实现的重复。
记忆
记忆化意味着，当您多次调用具有相同参数的函数时，该函数将只执行一次。在给定相同参数的情况下，无论调用多少次或何时调用，纯函数都会返回相同的结果。
这意味着，当您使用相同的参数再次调用该函数时，您不需要执行它，因为您已经知道结果了。
Memoization可以用来不调用昂贵的函数(比如过滤一个大数组(。在React中，记忆很重要，因为如果道具发生变化，纯组件将重新渲染：
const mapStateToProps = state => {
//already assuming where data is and people is not
// a constant
return {
USPeople: state.data.people.filter(person=>person.address.countey === US)
}
}
即使state.data.people没有改变，filter函数每次都会返回一个新的数组。
它的工作原理
下面是对createSelector的重写，并附有一些注释。删除了一些安全检查参数的代码，并允许您使用函数数组调用createSelector。如果你有什么难以理解的地方，请评论。
const memoize = fn => {
let lastResult,
//initial last arguments are not going to be the same
// as anything you will pass to the function the first time
lastArguments = [{}];
return (...currentArgs) => {//returning memoized function
//check if currently passed arguments are the same as
// arguments passed last time
const sameArgs =
currentArgs.length === lastArguments.length &&
lastArguments.reduce(
(result, lastArg, index) =>
result && Object.is(lastArg, currentArgs[index]),
true
);
if (sameArgs) {
//current arguments are the same as the last so just
// return the last result and don't execute the function
return lastResult;
}
//current arguments are not the same as last time
// or function called for the first time, execute the
// function and set the last result
lastResult = fn.apply(null, currentArgs);
//set last args to current args
lastArguments = currentArgs;
//return result
return lastResult;
};
};
const createSelector = (...functions) => {
//get the last function by popping it off of the functions
// this mutates functions so functions do not have the
// last function on it anymore
// also memoize the last function
const lastFunction = memoize(functions.pop());
//return a selector function
return (...args) => {
//execute all the functions (last was already removed)
const argsForLastFunction = functions.map(fn =>
fn.apply(null, args)
);
//return the result of a call to lastFunction with the
// result of the other functions as arguments
return lastFunction.apply(null, argsForLastFunction);
};
};
//selector to get data from state
const selectData = state => state.data;
//select a particular entity from state data
// has 2 arguments: state and entity where entity
// is a string (like 'people')
const selectDataEntity = createSelector(
selectData,
(_, entity) => entity,
(data, entity) => data[entity]
);
//select an entity from state data and filter it
// has 3 arguments: state, entity and filterFunction
// entity is string (like 'people') filter is a function like:
// person=>person.address.country === US
const filterDataEntity = createSelector(
selectDataEntity,
(a, b, filter) => filter,
(entities, filter) => entities.filter(filter)
);
//some constants
const US = 'US';
const PEOPLE = 'people';
//the state (like state from redux in connect or useSelector)
const state = {
data: {
people: [
{ address: { country: 'US' } },
{ address: { country: 'CA' } },
],
},
};
//the filter function to get people from the US
const filterPeopleUS = person =>
person.address.country === US;
//get people from the US first time
const peopleInUS1 = filterDataEntity(
state,
PEOPLE,
filterPeopleUS
);
//get people from the US second time
const peopleInUS2 = filterDataEntity(
state,
PEOPLE,
filterPeopleUS
);
console.log('people in the US:', peopleInUS1);
console.log(
'first and second time is same:',
peopleInUS1 === peopleInUS2
);