所以我们让这个选择器获取我们的状态VisibleTodoList
成分:
const mapStateToProps = (state, props) => {
return {
todos: getVisibleTodos(state, props)
}
}
如果我们渲染组件:
return (
<div>
<VisibleTodoList listId="1" />
</div>
)
然后,选择器被调用,如下所示:getVisibleTodos(state, { listId: 1 })
,选择器将结果(待办事项列表 1 对象)存储(记忆)在内存中。
如果我们使用相同的 props 渲染组件两次:
return (
<div>
<VisibleTodoList listId="1" />
<VisibleTodoList listId="1" />
</div>
)
选择器被调用并且结果被记忆
选择器被第二次调用,它看到{ listId: 1 }
与第一次相同的 prop 参数,因此它只返回记忆值。
如果我们使用不同的 props 渲染组件两次:
return (
<div>
<VisibleTodoList listId="1" />
<VisibleTodoList listId="2" />
</div>
)
选择器被调用并且结果被记忆
选择器被第二次调用,它看到{ listId: 2 }
与第一次的 props args 不一样{ listId: 1 }
,因此它会重新计算并在内存中记忆新结果(待办事项列表 2 对象)(覆盖之前的记忆)。
如果我们希望每个组件都有自己的记忆,每个组件实例必须有自己的选择器实例。
例如:
// selector
const makeGetVisibleTodos = () => createSelector(
// ... get the visible todos
);
// each has their own memoization space:
const foo = makeGetVisibleTodos(); // this is an instance
const bar = makeGetVisibleTodos(); // this is a separate instance
因此将其应用到组件上:
// component
const mapStateToProps = () => {
const getVisibleTodos = makeGetVisibleTodos(); // this instance get bound to the component instance
return (state, props) => {
return {
todos: getVisibleTodos(state, props)
}
}
}
现在,如果我们使用不同的 props 渲染组件两次:
return (
<div>
<VisibleTodoList listId="1" />
<VisibleTodoList listId="2" />
</div>
)
with <VisibleTodoList listId="1" />
选择器的第一个实例被调用,结果被记忆
with <VisibleTodoList listId="2" />
选择器的不同实例被调用并且结果被记忆