reselect源码分析一 ———— createSelector、createSelectorCreator

在平时开发的过程中，会应用react-redux这个中间件，但是每次更新时，不管redux中的state是否变化，都会重新更新mapStateToProps里面的值，这会造成大量冗余的操作。reselect作为redux性能优化的中间件已经在广泛使用，只有当redux中的state发生变化时，才会更新mapStateToProps中的值。下面来对其源码进行一下分析，看一下其内部是如何做到这方面性能优化的。

reselect常用的Api是createSelector，那就先来看一下它的源码：

createSelector

1
export const createSelector = createSelectorCreator(defaultMemoize)

createSelector的源码就这一行，它调用了createSelectorCreator方法并传入defaultMemoize作为参数。而createSelectorCreator也是relect的一个Api，所以createSelector是根据createSelectorCreator来的，那接下来就看一下defaultMemoize、createSelectorCreator的源码。

在看源码之前，需要先看两个工具函数，它们起着很重要的作用：

1
2
3
function defaultEqualityCheck(a, b) {
    return a === b
}

这个函数很简单，就是对两个参数进行强比较。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function areArgumentsShallowlyEqual(equalityCheck, prev, next) {
    if (prev === null || next === null || prev.length !== next.length) {
        return false
    }

    const length = prev.length
    for (let i = 0; i < length; i++) {
        if (!equalityCheck(prev[i], next[i])) {
            return false
        }
    }

    return true
}

这个函数也不复杂，其主要是遍历元素，然后调用equalityCheck方法，如果有一项不满足，就会马上退出。

defaultMemoize

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
    defaultMemoize接收两个参数：
        func是要调用的方法
        equalityCheck就是对比前后两个数据的方法，默认值是defaultEqualityCheck
*/
export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {
    
    /*
        先声明了两个为null的变量，它们有很重要的作用
    */
    let lastArgs = null
    let lastResult = null

    /*
        这里返回一个函数，调用了areArgumentsShallowlyEqual方法
        并将equalityCheck、lastArgs以及函数的arguments传入
        如果满足条件，则直接让传入的func调用arguments
        并把arguments赋值给lastArgs
        这里应用闭包的方式，将参数记录保存下来
    */
    return function () {
        if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
            lastResult = func.apply(null, arguments)
        }

        lastArgs = arguments
        return lastResult
    }
}

defaultMemoize是reselect的核心方法，通过上面的源码分析可以知道，每次使用时，都会把参数arguments通过闭包的方式保存起来，这样下次再调用时，可以获取到上次保存的值（也就是prevArguments），然后与本次的arguments（也就是nextArguments）做对比，只有变化的时候，才会再次调用传入的func方法。而这里的arguments其实就是在mapStateToProps中传入的参数

createSelectorCreator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/*
    createSelectorCreator接收若干参数，但最主要的是memoize
    createSelector调用createSelectorCreator传入的参数是defaultMemoize
    所以这里的memoize就是defaultMemoize
    然后返回一个接收任意多个以函数为参数的方法
*/
export function createSelectorCreator(memoize, ...memoizeOptions) {
    return (...funcs) => {
        /*
            这里先声明了要重新计算的次数，然后获取到传入的参数最后一项
            并对剩余的参数调用了getDependencies方法（不要忘记数组的pop
            方法会改变原始数组）
            这里的funcs就是在创建createSelector时传入的参数
            先去下面看看getDependencies方法
            通过分析可知，就是对参数做了校验
        */
        let recomputations = 0
        const resultFunc = funcs.pop()
        const dependencies = getDependencies(funcs)

        /*
            这里调用了memoize也就是defaultMemoize，并传入参数
        */
        const memoizedResultFunc = memoize(
            function () {
                recomputations++
                return resultFunc.apply(null, arguments)
            },
            ...memoizeOptions
        )

        /*
            selector是最后的返回值，它同样会调用defaultMemoize方法
        */
        const selector = memoize(function () {
            const params = []
            const length = dependencies.length

            /*
                这里除funcs最后一个参数外，都会以arguments作为参数传入
                并将执行后的结果放入到数组params中，最终再执行结果函数
                并以params为参数，仔细分析可知，这里的arguments就是在
                mapStateToProps传入的值
            */
            for (let i = 0; i < length; i++) {
                params.push(dependencies[i].apply(null, arguments))
            }

            /*
                所以这也就是在createSelector时，最后一个方法可以以前面
                方法的结果作为参数
            */
            return memoizedResultFunc.apply(null, params)
        })

        /*
            这里还定义的selector的其它一些属性，可以直接在开发中使用
            每个属性的value都对应上面定义的值
        */
        selector.resultFunc = resultFunc
        selector.dependencies = dependencies
        selector.recomputations = () => recomputations
        selector.resetRecomputations = () => recomputations = 0
        return selector
    }
}

getDependencies方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
    getDependencies方法其实很简单，就是判断参数的每一项是否都是函数
    如果不是就会报错，如果都是函数，则直接把参数返回
    看了源码也可以知道，传入的参数可以是单个的参数，也可以是数组
    所以在平时写createSelector时，除了最后一个参数外，其余参数可以都放在数组里
*/
function getDependencies(funcs) {
    const dependencies = Array.isArray(funcs[0]) ? funcs[0] : funcs
    if (!dependencies.every(dep => typeof dep === 'function')) {
        const dependencyTypes = dependencies.map(
            dep => typeof dep
        ).join(', ')
        throw new Error(
            'Selector creators expect all input-selectors to be functions, ' +
            `instead received the following types: [${dependencyTypes}]`
        )
    }

    return dependencies
}

creatSelector实例

1
2
3
4
5
6
7
8
9
10
11
12
//selector
const getNumA = state => state.numA
const getNumB = state => state.numB
const sumFn = (numA, numB) => numA + numB
const numSum = createSelector(
    getNumA,
    getNumB,
    sumFn
)

//mapStateToProps
const mapStateToProps = state => ({ num: numSum(state) })

上面是非常简单的例子，来结合源码看一下过程：

1、根据分析，getNumA、getNumB、sumFn作为createSelectorCreator返回函数的参数funcs传入，先将sumFn取出，然后其他参数做是否为函数校验。

2、定义memoizedResultFunc，其值是经过defaultMemoize转换后的值，也就是：

1
2
3
4
5
6
7
8
9
10
11
12
13
const func1 = function () {
    recomputations++
    return resultFunc.apply(null, arguments)
}

const memoizedResultFunc = function () {
    if (!areArgumentsShallowlyEqual(defaultEqualityCheck, lastArgs, arguments)) {
        lastResult = func1.apply(null, arguments)
    }

    lastArgs = arguments
    return lastResult
}

3、定义selector，其值也是经过defaultMemoize转换后的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const func2 = function () {
  const params = []
  const length = dependencies.length

  for (let i = 0; i < length; i++) {
    params.push(dependencies[i].apply(null, arguments))
  }

  return memoizedResultFunc.apply(null, params)
}

const selector = function () {
    if (!areArgumentsShallowlyEqual(defaultEqualityCheck, lastArgs, arguments)) {
        lastResult = func2.apply(null, arguments)
    }

    lastArgs = arguments
    return lastResult
}

4、当在mapStateToProps中调用numSum方法并传入state时，会执行selector方法，所以selector中的arguments就是state，在selector内部会执行func2方法，同时用闭包的方式保存下来arguments，这样在getNumA、getNumB就会接收到state参数，将结果放入params数组中，执行memoizedResultFunc传入params

5、memoizedResultFunc内的arguments就是传入的params，然后执行func1方法，也就以params为参数执行了sumFn，同样会用闭包保存下来arguments，最终得到的num就是sumFn执行后的结果

6、此时保存了两个arguments，一个是state，一个是params。只有当两个都发生变化的时候，num才会更新，否则就一直保持原来的值

createSelectorCreator其它用法

看完源码知道，createSelector是基于createSelectorCreator实现的，传入的参数是defaultMemoize，也就是reselect内部默认的方法。但reselect也允许自定义可配置的selector，也就是传入createSelectorCreator的参数可以自己选择，比如传入lodash、underscore中的比较、对比、缓存等方法，具体用法可以查看github文档，里面有详细介绍。

总结

经过上面的分析，createSelector也就是createSelectorCreator内部最主要是应用了闭包的方式，保存了之前的参数值，然后当再次调用方法传入参数的时候，会将前后两次的值进行对比，只有在发生变化的时候，才会真正调用定义selector时的方法。

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端小白一枚<br><br>乐于学习实践web<br>对主流知识有浓厚兴趣<br><br>欢迎大家来分享、评论