模拟代码帮助理解reselect的createSelector函数

广告位招租
扫码页面底部二维码联系

reselect提供的createSel【未经授权禁止转载】【本文首发于唐霜的博客】ector API具有记忆功能,但是它的【未经授权禁止转载】【本文首发于唐霜的博客】用法奇怪,让入门者比较难理解,我也废了不【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。少力才理解到这块。现在通过模拟脚本,来协【转载请注明来源】本文版权归作者所有,未经授权不得转载。助理解。先来看下我们怎么创建一个sele【本文受版权保护】本文版权归作者所有,未经授权不得转载。ctor函数:

【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【作者:唐霜】ang.net【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netang.net未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。
let selector = createSelector([fun1, fun2], fun3)

在使用selector的时候,把它当作一著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。个函数,传入state和props作为参本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。数。接下来我们通过selector的反推【本文受版权保护】【本文受版权保护】来理解:

【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。ngnet】【原创不易,请尊重版权】【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。
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)

这样就可以非常容易的理解,createS【未经授权禁止转载】本文作者:唐霜,转载请注明出处。elector传入的参数中的函数,各自在本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。什么时候执行,执行的结果拿来干什么。

【原创不易,请尊重版权】【本文首发于唐霜的博客】未经授权,禁止复制转载。【原创不易,请尊重版权】

createSelector的第一个参数【版权所有,侵权必究】【版权所有,侵权必究】是个数组,数组的个数和第二个参数函数(f【原创不易,请尊重版权】原创内容,盗版必究。un3)的参数个数相同,这个怎么做到呢?本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net其实很简单,用扩展运算符…或未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】者用.apply都可以做到。

【版权所有,侵权必究】【转载请注明来源】

最后的问题是,如何做到记忆功能呢?

未经授权,禁止复制转载。【关注微信公众号:wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。ngnet】【转载请注明来源】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【本文首发于唐霜的博客】ang.net

reselect的记忆功能的规则是,fu【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。n3的实参如果不变,那么说明它的运算结果【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】也不变,可以直接返回缓存起来的结果。

原创内容,盗版必究。【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua【版权所有,侵权必究】转载请注明出处:www.tangshuang.netng.net

所以,要使记忆功能生效,你必须保证fun【未经授权禁止转载】原创内容,盗版必究。3的实参不变,说白了,就是fun1, f转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。un2的计算结果不变,因此fun1, f未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。un2必须是返回固定值的函数。这种函数比【原创内容,转载请注明出处】未经授权,禁止复制转载。pure function还要硬性,即使【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】参数不同,也要永远返回一个值。当然,我们本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。是不可能做到这样的,如果fun1依赖的s原创内容,盗版必究。未经授权,禁止复制转载。tate发生来变化,那么它的结果自然就会未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net变,这个时候,fun3就不再返回缓存,而【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。是重新计算结果,同时缓存新的结果,下次就【本文受版权保护】转载请注明出处:www.tangshuang.net可以用这个缓存了。这样,就做到selec【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。tor的响应式。

原创内容,盗版必究。转载请注明出处:www.tangshua【作者:唐霜】【作者:唐霜】ng.net【原创不易,请尊重版权】【未经授权禁止转载】

最后的问题是,如果fun1, fun2的【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。结果会随着props的不同而返回不同的结【转载请注明来源】【原创不易,请尊重版权】果呢?这种情况普遍存在,一个react组原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。件可能在一个页面里面被多次使用,每次使用【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。的时候props可能不同。这就会导致re【本文受版权保护】【原创不易,请尊重版权】select的记忆功能失效。

【原创内容,转载请注明出处】【本文受版权保护】

解决的办法还是要从记忆功能的原理中去寻找【作者:唐霜】【原创内容,转载请注明出处】

转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。ng.net【作者:唐霜】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。

每一个计算结果的缓存,与传入fun3的参【作者:唐霜】【本文首发于唐霜的博客】数是一一对应的,fun3可以说是一个pu原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。re function,参数相同的情况下本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。,得到的结果永远相同。有两种解决的想法:

未经授权,禁止复制转载。【作者:唐霜】【访问 www.tangshuang.n【原创内容,转载请注明出处】【版权所有,侵权必究】et 获取更多精彩内容】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。et 获取更多精彩内容】
  1. 为每一个组件设置单独的映射,这个可以通过【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。react-redux的connect来【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。实现,当mapStateToProps返本文版权归作者所有,未经授权不得转载。【转载请注明来源】回的是一个函数时,那么这个函数的运算结果【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net仅对组件的当前实例生效,也就是说,在我们未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】写mapStateToProps函数时,【原创不易,请尊重版权】【原创不易,请尊重版权】不能直接返回映射关系,而是返回一个函数,转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】这个函数里面去做一些处理后再返回映射关系【未经授权禁止转载】【未经授权禁止转载】。下面有例子。
  2. 【版权所有,侵权必究】【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。ang.net
  3. 既然fun3的计算结果是根据参数来缓存的原创内容,盗版必究。【未经授权禁止转载】,那么我们可以尝试对参数做hash,固定著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。的参数对应固定的fun3函数体,不同的参未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。数对应不同的fun3函数体,当在不同的参【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。数之间切换时,如果发现这个hash有存在原创内容,盗版必究。【版权所有,侵权必究】的fun3函数体,那么就立即用它的缓存。本文作者:唐霜,转载请注明出处。【作者:唐霜】下面也有例子。
  4. 【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【未经授权禁止转载】ang.net【访问 www.tangshuang.n【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】

想法1的例子:

【转载请注明来源】原创内容,盗版必究。
const makeMapStateToProps = () => {
 const getSelector = makeSelector() // 下一段代码看makeSelector是怎么写的
 const mapStateToProps = (state, props) => {
  return {
   todos: getSelector(state, props)
  }
 }
 return mapStateToProps
}
export default connect(makeMapStateToProps)(MyComponent)
import { createSelector } from 'reselect'
function getSelector(state, props) {
  return state[props.id]
}

export function makeSelector() {
  return createSelector(
    [ getSelector ],
    (user) => {
      user.total_books = user.books.length
      return user
    },
  )
}

通过结合文章开头的推导代码,你会发现,每转载请注明出处:www.tangshuang.net【本文受版权保护】个组件的实例的props.id是一定的,未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】因此对应的user也是一定的,那么每次都【原创不易,请尊重版权】【未经授权禁止转载】可以使用缓存起来的user。当然,如果p未经授权,禁止复制转载。【转载请注明来源】rops.id改变来,那么缓存就失效了。

【访问 www.tangshuang.n【关注微信公众号:wwwtangshuangnet】【本文受版权保护】et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.n未经授权,禁止复制转载。【作者:唐霜】et 获取更多精彩内容】

想法2,对makeSelector做深度【原创内容,转载请注明出处】【作者:唐霜】改造:

【访问 www.tangshuang.n【原创不易,请尊重版权】【作者:唐霜】et 获取更多精彩内容】【原创内容,转载请注明出处】【未经授权禁止转载】
let selectors = {}
function makeSelector(uid) {
  if (selectors[uid]) return selectors[uid]
  let selector = createSelector(...)
}
function deleteSelector(uid) {
  delete selectors[uid]
}

在connect的时候,直接在makeS【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。elector的时候传入props.id本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。作为标记,mapStateToProps【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】不再返回函数作为结果。当不再对uid对应【未经授权禁止转载】【版权所有,侵权必究】的用户进行操作之后,要即时删除这个sel原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。ector。

【作者:唐霜】原创内容,盗版必究。【访问 www.tangshuang.n原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】