redux 网站上有一篇关于使用 reselect lib 进行选择器记忆的文章,其中提供了下一个示例:
const state = {
a: {
first: 5
},
b: 10
}
const selectA = state => state.a
const selectB = state => state.b
const selectA1 = createSelector([selectA], a => a.first)
const selectResult = createSelector([selectA1, selectB], (a1, b) => {
console.log('Output selector running')
return a1 + b
})
const result = selectResult(state)
// Log: "Output selector running"
console.log(result)
// 15
const secondResult = selectResult(state)
// No log output
console.log(secondResult)
// 15
除了 selectA1 选择器之外,总体示例很清晰。 Redux 文档指出
当您调用选择器时,Reselect 将使用您提供的所有参数运行输入选择器,并查看返回的值。如果任何结果 === 与之前不同,它将重新运行输出选择器,并将这些结果作为参数传递。
因此,如果我们提供 state.a(即对象)作为 selectA1 的输入选择器,那么每次都会失败 === 检查并运行 a => a.first,对吧?还是我理解错了什么?
因此,如果我们提供
(对象)作为输入选择器state.a
,每次都会失败selectA1
检查并运行===
, 对吗?a => a.first
不,
selectA
选择器函数返回state.a
,它是对值为{ first: 5 }
的对象的引用。 state.a
将继续 always 成为对 this 对象的引用,直到分派操作来更新 state.a
,然后成为对具有值的 new 对象的引用,然后 selectA1
选择器函数将重新计算其输出值。对象引用将始终严格等于其自身。
我希望这个片段有助于解释对象引用相等性。
const state = {
a: { first: 5 },
};
const selectA = state => state.a;
// same reference, true
console.log(selectA(state) === state.a);
// same "value", but false because different reference
console.log({ first: 5 } === state.a);