Reselect这个中间件要解决的问题是:在组件交互操作的时候,state发生变化的时候使用了缓存机制减少渲染的压力。 reselect提供的createSelector API具有记忆功能,先来看下我们怎么创建一个selector函数:
let selector = createSelector([fun1, fun2], fun3)
在使用selector的时候,把它当作一个函数,传入state和props作为参数。
let someState = selector(state, props)
<- 在mapStateToProps中这样用推导出 =>
let someState = (function(state, props) {
let state1 = fun1(state, props)
let state2 = fun2(state, props)
return fun3(state1, state2)
})(state, props)
这样就可以非常容易的理解,createSelector传入的参数中的函数,各自在什么时候执行,执行的结果拿来干什么。
reselect的记忆功能的规则是,fun3的实参如果不变,那么说明它的运算结果也不变,可以直接返回缓存起来的结果。
所以,要使记忆功能生效,你必须保证fun3的实参不变,说白了,就是fun1, fun2的计算结果不变,因此fun1, fun2必须是返回固定值的函数。这种函数比pure function还要硬性,即使参数不同,也要永远返回一个值。当然,我们是不可能做到这样的,如果fun1依赖的state发生来变化,那么它的结果自然就会变,这个时候,fun3就不再返回缓存,而是重新计算结果,同时缓存新的结果,下次就可以用这个缓存了。这样,就做到selector的响应式。