Reselect源码分析

 

Reselect库可以创建可记忆的(Memoized)、可组合的 selector 函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。react通过connect高阶组件将redux与react连接，当redux更新时，如果不使用Reselect库时，每当组件更新重新计算衍生数据有可能会造成不必要的性能浪费，通过阅读源码了解到Reselect是如何搞笑的计算衍生数据的，这里做个简单的记录。

export const createSelector = createSelectorCreator(defaultMemoize)

export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {

  //通过闭包将参数和结果保存至内存 
  let lastArgs = null
  let lastResult = null
  
  return function () {
    //areArgumentsShallowlyEqual函数第一个参数为判断函数，第二个是缓存的参数，第三个是新的参 
    //数，默认判断函数是判断两者是否全等，也可以由用户自己设置条件
    if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
      //如果前后两次的参数不全等（默认，可以用户自己传入判断函数）或者数量不一致，重新计算结果并保        
      //存至内存
      lastResult = func.apply(null, arguments)
    }
    //将新的参数保存至内存，个人觉得这个可以放在if条件里
    lastArgs = arguments
    //返回lastResult
    return lastResult
  }
}

 

export function createSelectorCreator(memoize, ...memoizeOptions) {
  return (...funcs) => {
    //计数器，记录重新计算了多少次
    let recomputations = 0
    //数据计算函数
    const resultFunc = funcs.pop()
    //依赖参数，getDependencies函数主要是判断传入的是数组与否，并判断传入的依赖是否是函数
    const dependencies = getDependencies(funcs)
    //调用memoize传入数据计算函数，只有当参数变化才会重新数据计算，可以通过传入memoizeOptions来
    //设置依赖变化判断函数，默认是判断前后参数是否全等
    const memoizedResultFunc = memoize(
      function () {
        recomputations++
        return resultFunc.apply(null, arguments)
      },
      ...memoizeOptions
    )
    //这里传入的参数即我们在项目中传入的实际参数，比如传入redux state，每当store更新state变化，        
    //然后调用下面的function
    const selector = memoize(function () {
      const params = []
      const length = dependencies.length

      for (let i = 0; i < length; i++) {
        //将实参依次传入依赖函数，并push进params
        params.push(dependencies[i].apply(null, arguments))
      }
      //将params传入memoizedResultFunc，如果新的params不变，那么直接返回上次的结果，否则重新 
      //计算
      return memoizedResultFunc.apply(null, params)
    })

    selector.resultFunc = resultFunc
    selector.dependencies = dependencies
    //通过函数返回计数器，这样可以使得用户不能直接更改
    selector.recomputations = () => recomputations
    //重制计数器
    selector.resetRecomputations = () => recomputations = 0
    return selector
  }
}

以上是Reselect主要逻辑，通过调用createSelectorCreator(defaultMemoize)来生成createSelector。传入依赖与计算衍生的函数，只有当依赖变化时才会重新计算，如果依赖没有变化直接返回上一次的结果，这样来达到高效合理的计算。主要黑科技是使用闭包来缓存数据，闭包原来还有这样用法，真的学到了不少。

具体源码可以看：https://github.com/reduxjs/reselect/blob/master/src/index.js